如何更改卡片的边框颜色，在 Jetpack Compose 中点击卡片？

Question

我有显示在惰性行中的用户列表。 每行由一张卡片表示。 每张卡片都有一个红色边框。 如何在卡片点击时将卡片的边框从红色更改为黑色？

这是我尝试过的：

LazyRow(
    modifier = Modifier.fillMaxWidth()
) {
    items(users) { user ->
        UserCard(
            name = user.name
        )
    }
}

这是卡片：

fun UserCard(
    name: String
) {
    Card(
        modifier = Modifier.fillMaxWidth()
        border = BorderStroke(2.dp, Color.Red),
        onClick = { ??? }
    ) {
        Text(
            text = name
        )
    }
}

Answer 1

你可以使用类似的东西：

var cardColor by remember { mutableStateOf(Red)}

Card(
    //..
    border = BorderStroke(2.dp, cardColor),
    onClick = { cardColor = Blue }
) {
    Text(
        text = "name"
    )
}

如果要处理选定的 state，可以使用以下内容：

var selectedCard by remember { mutableStateOf(false) }
var cardColor = if (selectedCard) Red else Black

Card(
    border = BorderStroke(2.dp, cardColor),
    onClick = { selectedCard = !selectedCard }
) {
    Text(
        text = "name"
    )
}

Answer 2

如果你想拥有一个有状态的 Composable，你可以通过使用 MutableState 将颜色存储在一个记忆中并在点击时更改它来实现。 但是，当您滚动回同一项目时，这将重置，因为它会在再次出现在屏幕上时重新组合，并且不推荐使用 state。 关于国家吊装的官方文件。

fun UserCard(
    name: String
) {

    var color by remember {mutableStateOf(Color.Red)}
    Card(
        modifier = Modifier.fillMaxWidth()
        border = BorderStroke(2.dp, color),
        onClick = { color = Color.Black}
    ) {
        Text(
            text = name
        )
    }
}

如果您希望拥有无状态的可组合，您可以通过状态提升来实现。 与上面的不同，即使您向下滚动和 go 备份，当新项目将被重新组合时，该颜色也将具有相同的颜色将现有的边框颜色

data class User(val name: String, var color: Color = Color.Red)

@Composable
private fun BorderList() {
    val userList = remember {
        mutableStateListOf<User>().apply {
            repeat(100) {
                add(User("User $it"))
            }
        }
    }

    LazyColumn {
        itemsIndexed(userList) { index, user ->
            UserCard(name = user.name, borderColor = user.color) {

                val newColor = if(user.color == Color.Red) Color.Black else Color.Red
                userList[index] = user.copy(color = newColor)
            }
        }
    }
}

@Composable
fun UserCard(
    name: String,
    borderColor: Color,
    onColorChange: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        border = BorderStroke(2.dp, borderColor),
        onClick = { onColorChange() }
    ) {
        Text(
            text = name
        )
    }
}