英文:
How to expand Box Composable by toggleSwitch(Android , Jetpack Compose)
问题
我正在使用Jetpack Compose以列的形式拆分可组合物，我想知道其他可组合物是否会受到包含在框中的可组合物的大小影响，是否可以自动调整大小。 <br>
根据顶部应用栏中自定义切换开关的更改，日历的形状会改变。根据日历的形状，我想更改日历下方框的Row类型文本的大小，例如拉伸和收缩。<br>
我该如何修复它？
代码:
val states = listOf("월간", "주간")
var selectedOption by remember { mutableStateOf(states[0]) }
val onSelectionChange = { text: String -> selectedOption = text }
var isVisible by remember { mutableStateOf(false) }
Scaffold(topBar = {
TopAppBar(title = {
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
Row(modifier = Modifier
.width(115.dp)
.height(35.dp)
.clip(shape = RoundedCornerShape(24.dp))
.background(Color(0xffe9e9ed))
.padding(start = 10.dp, end = 5.dp, top = 6.dp, bottom = 5.dp)) {
states.forEach { text ->
Text(text = text,
fontSize = 10.sp,
lineHeight = 16.sp,
color = if (text == selectedOption) {
Color.Black
} else {
Color.Gray
},
fontWeight = FontWeight.Medium,
modifier = Modifier
.clip(shape = RoundedCornerShape(24.dp))
.clickable {
onSelectionChange(text)
isVisible = (text == states[1])
}
.background(if (text == selectedOption) {
Color.White
} else {
Color(0xffe9e9ed)
})
.padding(
vertical = 5.dp,
horizontal = 16.dp,
))
}
}
}
},
actions = {
IconButton(onClick = {
goDetailProfile(NAV_ROUTE.PROFILE, routeAction)
}) {
Icon(imageVector = Icons.Filled.Menu, contentDescription = "profile")
}
},
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.White,
titleContentColor = Color.Black))
}) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color(0xfff0f0f0))) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f),
) {
Box(
modifier = Modifier
.fillMaxSize()
.clip(shape = RoundedCornerShape(bottomStart = 30.dp, bottomEnd = 30.dp))) {
if (isVisible) {
Kalendar(
modifier = Modifier
.fillMaxWidth()
.padding(top = 45.dp)
.clip(shape = RoundedCornerShape(bottomStart = 30.dp,
bottomEnd = 30.dp)),
kalendarHeaderConfig = KalendarHeaderConfig(
kalendarTextConfig = KalendarTextConfig(
kalendarTextColor = KalendarTextColor(Color.Black),
kalendarTextSize = KalendarTextSize.SubTitle)
),
kalendarType = KalendarType.Oceanic(),
kalendarDayColors = KalendarDayColors(Color.Black, Color.Black),
kalendarThemeColor = KalendarThemeColor(backgroundColor = Color.White,
dayBackgroundColor = Color(0xffFBE3C7),
headerTextColor = Color.Black),
onCurrentDayClick = { kalendarDay: KalendarDay, kalendarEvents: List<KalendarEvent> ->
year = kalendarDay.localDate.year
month = kalendarDay.localDate.monthNumber
day = kalendarDay.localDate.dayOfMonth
readTodo(token, year, month, day, response = {
todoList.clear()
for (i in it!!.data) {
todoList.add(i)
}
})
})
} else {
Kalendar(
modifier = Modifier
.fillMaxWidth()
.padding(top = 25.dp)
.clip(
shape = RoundedCornerShape(
bottomStart = 30.dp,
bottomEnd = 30.dp)),
kalendarHeaderConfig = KalendarHeaderConfig(kalendarTextConfig = KalendarTextConfig(
kalendarTextColor = KalendarTextColor(Color.Black),
kalendarTextSize = KalendarTextSize.SubTitle)),
kalendarType = KalendarType.Firey,
kalendarDayColors = KalendarDayColors(Color.Black, Color.Black),
kalendarThemeColor = KalendarThemeColor(backgroundColor = Color.White,
dayBackgroundColor = Color(0xffFBE3C7),
headerTextColor = Color.Black),
onCurrentDayClick = { kalendarDay: KalendarDay, kalendarEvents: List<KalendarEvent> ->
year = kalendarDay.localDate.year
month = kalendarDay.localDate.monthNumber
day = kalendarDay.localDate.dayOfMonth
readTodo(token, year, month, day, response = {
todoList.clear()
for (i in it!!.data) {
todoList.add(i)
}
})
})
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.padding(top = 30.dp)
) {
Box(
modifier = Modifier
.fillMaxSize()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 21.dp, end = 21.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = day.toString(),
fontSize = 26.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(end = 5.dp)
)
Divider(
modifier = Modifier
.fillMaxWidth()
.padding(start = 5.dp),
color = Color(0xffD8D8D8)
)
}
Box(
modifier = Modifier
.fillMaxSize()
.padding(top = 50.dp),
contentAlignment = Alignment.TopCenter
) {
TodoItemList(Todo = todoList)
}
}
}
}
})
英文:
I am developing on dividing the composable in the box in the form of a column using Jetpack composable. I would like to know if other composable are affected by the size of the composable in the box and can be resized automatically. <br>
The shape of the calendar changes according to the change of the custom toggle Switch in TopAppBar. According to the shape of the calendar, I would like to change the size of the box's Row-type text under the calendar, such as being pulled and pushed.<br>
How can i fix it?
Code:
val states = listOf("월간", "주간")
var selectedOption by remember { mutableStateOf(states[0]) }
val onSelectionChange = { text: String -> selectedOption = text }
var isVisible by remember { mutableStateOf(false) }
Scaffold(topBar = {
TopAppBar(title = {
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
Row(modifier = Modifier
.width(115.dp)
.height(35.dp)
.clip(shape = RoundedCornerShape(24.dp))
.background(Color(0xffe9e9ed))
.padding(start = 10.dp, end = 5.dp, top = 6.dp, bottom = 5.dp)) {
states.forEach { text ->
Text(text = text,
fontSize = 10.sp,
lineHeight = 16.sp,
color = if (text == selectedOption) {
Color.Black
} else {
Color.Gray
},
fontWeight = FontWeight.Medium,
modifier = Modifier
.clip(shape = RoundedCornerShape(24.dp))
.clickable {
onSelectionChange(text)
isVisible = (text == states[1])
// isVisible = !isVisible
}
.background(if (text == selectedOption) {
Color.White
} else {
Color(0xffe9e9ed)
})
.padding(
vertical = 5.dp,
horizontal = 16.dp,
))
}
}
}
},
actions = {
IconButton(onClick = {
goDetailProfile(NAV_ROUTE.PROFILE, routeAction)
}) {
Icon(imageVector = Icons.Filled.Menu, contentDescription = "profile")
}
},
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.White,
titleContentColor = Color.Black))
}) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color(0xfff0f0f0))) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f),
) {
Box(
modifier = Modifier
.fillMaxSize()
.clip(shape = RoundedCornerShape(bottomStart = 30.dp, bottomEnd = 30.dp))) {
if (isVisible) {
Kalendar(
modifier = Modifier
.fillMaxWidth()
.padding(top = 45.dp)
.clip(shape = RoundedCornerShape(bottomStart = 30.dp,
bottomEnd = 30.dp)),
kalendarHeaderConfig = KalendarHeaderConfig(
kalendarTextConfig = KalendarTextConfig(
kalendarTextColor = KalendarTextColor(Color.Black),
kalendarTextSize = KalendarTextSize.SubTitle)
),
// kalendarEvents = List<KalendarDay> (
// size = ,
// init =
// ),
kalendarType = KalendarType.Oceanic(),
kalendarDayColors = KalendarDayColors(Color.Black, Color.Black),
kalendarThemeColor = KalendarThemeColor(backgroundColor = Color.White,
dayBackgroundColor = Color(0xffFBE3C7),
headerTextColor = Color.Black),
onCurrentDayClick = { kalendarDay: KalendarDay, kalendarEvents: List<KalendarEvent> ->
year = kalendarDay.localDate.year
month = kalendarDay.localDate.monthNumber
day = kalendarDay.localDate.dayOfMonth
readTodo(token, year, month, day, response = {
todoList.clear()
for (i in it!!.data) {
todoList.add(i)
}
})
})
} else {
Kalendar(
modifier = Modifier
.fillMaxWidth()
.padding(top = 25.dp)
.clip(
shape = RoundedCornerShape(
bottomStart = 30.dp,
bottomEnd = 30.dp)),
kalendarHeaderConfig = KalendarHeaderConfig(kalendarTextConfig = KalendarTextConfig(
kalendarTextColor = KalendarTextColor(Color.Black),
kalendarTextSize = KalendarTextSize.SubTitle)),
// com.himanshoe.kalendar.component.day.KalendarDay(kalendarDay =,
// selectedKalendarDay =,
// kalendarDayColors =,
// dotColor =,
// dayBackgroundColor =),
// kalendarEvents = List<KalendarEvent>(
//
// ),
kalendarType = KalendarType.Firey,
kalendarDayColors = KalendarDayColors(Color.Black, Color.Black),
kalendarThemeColor = KalendarThemeColor(backgroundColor = Color.White,
dayBackgroundColor = Color(0xffFBE3C7),
headerTextColor = Color.Black),
onCurrentDayClick = { kalendarDay: KalendarDay, kalendarEvents: List<KalendarEvent> ->
year = kalendarDay.localDate.year
month = kalendarDay.localDate.monthNumber
day = kalendarDay.localDate.dayOfMonth
readTodo(token, year, month, day, response = {
todoList.clear()
for (i in it!!.data) {
todoList.add(i)
}
})
})
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.padding(top = 30.dp)
) {
Box(
modifier = Modifier
.fillMaxSize()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 21.dp, end = 21.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = day.toString(),
fontSize = 26.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(end = 5.dp)
)
Divider(
modifier = Modifier
.fillMaxWidth()
.padding(start = 5.dp),
color = Color(0xffD8D8D8)
)
}
Box(
modifier = Modifier
.fillMaxSize()
.padding(top = 50.dp),
contentAlignment = Alignment.TopCenter
) {
TodoItemList(Todo = todoList)
}
}
}
}
}
答案1
得分: 1
我正在使用Jetpack Compose开发一个日历应用程序，我正在使用Column组合来构建UI。首先，我组合MonthView或WeekView，然后我组合TasksList。通过这样做，当用户在MonthView和WeekView之间切换时，TasksList会自动由Column布局调整。
英文:
I am developing a calendar app in Jetpack Compose, and I am using the Column composable to structure the UI. First, I compose either the MonthView or the WeekView, and then I compose the TasksList. By doing this, when the user toggles between the MonthView and the WeekView, the TasksList is automatically adjusted by the Column layout.
@Composable
fun MyCalendar() {
Column {
if (isMonthView) {
MonthView()
} else {
WeekView()
}
TasksList()
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论