Kotlin Jetpack Compose，卡片，点击改变颜色

Question

我无法获取 LazyColumn 中的 Card 来检查数字是否在 val guestNumbers 中，然后更改 Card 上的颜色。

但是 val guestNumbers 中的数字会在启动时发生变化。

Card 是正确的东西还是我应该使用按钮？

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {

            val guestNumbers = rememberSaveable {
                mutableStateOf(mutableSetOf<Int>(10,11,2,22))
            }

            NumberGuessingGameTheme {

                Scaffold(
                    topBar = {
                        TopAppBar {

                        }
                    }
                ) {
                    Row(modifier = Modifier.fillMaxSize()
                    ) {

                        Box(
                            modifier = Modifier
                                .fillMaxSize()
                                .weight(4f)
                                .background(color = Color.LightGray)
                        ) {
                            Text(
                                text = "1F",
                                style = MaterialTheme.typography.caption
                            )
                        }

                        Box(
                            modifier = Modifier
                                .fillMaxSize()
                                .weight(1f)
                                .background(color = Color.LightGray)
                        ) {
                            LazyColumn {
                                items(1000 + 1) {
                                    Card(modifier = Modifier
                                        .fillMaxSize()
                                        .padding(5.dp)
                                        //.background(if ("$it".toInt() !in guestNumbers.value) Color.Green else Color.Red)
                                        .clickable {
                                            guestNumbers.value.add("$it".toInt())
                                            Log.d("Tag", "${guestNumbers.value}")
                                        },
                                        elevation = 10.dp,
                                        backgroundColor = if ("$it".toInt() in guestNumbers.value) Color.Red else Color.LightGray
                                    ) {
                                        Text(text = "$it", fontSize = 28.sp, textAlign = TextAlign.Center)

                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Answer 1

mutableStateOf 无法跟踪底层对象的变化。只有当您将其值替换为其他对象时，它才会触发重组。

您可以存储一个不可变集，创建一个可修改的副本来更改它，然后将新值设置为您的可变状态。这将创建一个新对象。

var guestNumbers by rememberSaveable {
    mutableStateOf(setOf(10,11,2,22))
}

Button({
    val mutableSet = guestNumbers.toMutableSet()
    mutableSet.add(if (Random.nextBoolean()) 2 else Random.nextInt())
    guestNumbers = mutableSet.toSet()
}) {
    Text(guestNumbers.toString())
}

请注意，如果您将面临与列表相同的问题，则需要调用 .toImmutableList()，因为 .toList() 只是擦除类型，而不是在调用时实际创建新对象在可变列表中。

Kotlin Jetpack Compose，卡片，点击改变颜色

Kotlin Jetpack Compose, Card, change color on click

kotlin

android-jetpack-compose