用于更改多个按钮颜色的 onClick 触发器。 Jetpack 撰写

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())
        }
}
}

在此使用2个previos

@Composable
fun DaysOfWeek(
    onClick: () -> Unit,
    color: Color,
){

    Row(horizontalArrangement = Arrangement.SpaceEvenly){
        for(day in 0..6){
                DaysOfWeekContainer(
                    color = color
                ){
                    DaysOfWeekButton(
                        onClick = onClick,
                        day = day
                    )
        }
    }
}

所以我得到了带有 7 个按钮的行

@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
                    )
                }
            }
        }
    }
}

用于更改多个按钮颜色的 onClick 触发器。 Jetpack 撰写

onClick trigger for change color of multiple buttons. JetpackCompose

android

kotlin

android-jetpack

android-jetpack-compose