onClick触发器用于更改多个按钮的颜色.JetpackCompose

Question

一行有7个按钮。每个都有一个透明的背景。我想点击其中一个，它的颜色就会改变。我再按一次，它就回来了。其他按钮也一样。如果按钮变了颜色，就表示它被按下了。就像一个复选框。之后，我想知道7个按钮中哪个按下了，哪个没有。

我使用一些函数。这只适用于容器

@Composable
fun DaysOfWeekContainer(
color: Color,
content: @Composable () -> Unit
){
Surface(
modifier = Modifier
.size(40.dp),
shape = RectangleShape,
border = BorderStroke(1.dp, Color.Green),
color = color
){
content()
}
}

在这个函数中，我使用前一个并在其中放置一个TextButton

@Composable
fun DaysOfWeekButton(
onClick: () -> Unit,
day: Int,
//interactionSource: MutableInteractionSource
){
Box(contentAlignment = Center ){
TextButton(
onClick = onClick,
//interactionSource = interactionSource
){
Text(CalendarData(currentDay = day).currentDay())
}
}
}

@Composable
fun DaysOfWeek(
onClick: () -> Unit,
color: Color,
){
Row(horizontalArrangement = Arrangement.SpaceEvenly){
for(day in 0..6){
DaysOfWeekContainer(
color = color
){
DaysOfWeekButton(
onClick = onClick,
day = day
)
}
}
}

所以我得到row with 7 buttons

@Composable
fun MyCalScreen(){
val stateB = remember { mutableStateOf(false)}
val color = if (stateB.value) Color.Blue else Color.Green
Column(verticalArrangement = Arrangement.SpaceEvenly){
Text("_")
Spacer(modifier = Modifier.height(10.dp))
if(stateB.value){
DaysOfWeek(
onClick = { stateB.value = false },
color = color,
)
}else{
DaysOfWeek(
onClick = { stateB.value = true },
color = color,
)
}
}
}

它的工作非常可预测。我点击其中一个按钮，所有按钮的颜色都会改变。如何解决这个问题?你怎么知道哪些按钮被按下了?

Answer 1

每个按钮都应该保持它的状态。

val states = remember {
SnapshotStateList<Boolean>().also {
for(day in 0..days) {
it.add(false)
}
}
}

完整的示例

@Composable
fun ButtonSC(
days: Int = 6
) {
val states = remember {
SnapshotStateList<Boolean>().also {
for(day in 0..days) {
it.add(false)
}
}
}
Box(
Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Row(horizontalArrangement = Arrangement.SpaceEvenly){
for(day in 0..days) {
DaysOfWeekContainer(
color = if (states[day])Color.Blue else Color.Green,
){
DaysOfWeekButton(
onClick = {
states[day] = !states[day]
},
day = day
)
}
}
}
}
}