Jetpack Compose - 访问 row/grid 中的特定项目

Question

如何更改一行中的可组合项？

例如，如果我有这样的东西：

@Composable
fun WordGrid() {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        MyCard("")  basically a card with Text
        MyCard("")
        MyCard("")
    }
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        MyCard("")
        MyCard("")
        MyCard("")
   
    }
}

fun MyCard(text: String?) {
Card() {
    Text(
        text = text?: ""
        )
    }
}

和两个按钮：

Button "A" and Button "B"

每次点击一个按钮时，一张卡片应该从按钮中获取文本，然后是下一张卡片，然后是最后一张。

点击按钮 A B A B 会得到：

@Composable
fun WordGrid() {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        MyCard("A")  basically a card with Text
        MyCard("B")
        MyCard("A")
    }
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        MyCard("B")
        MyCard("")
        MyCard("")
   
    }
}

你如何单向处理这样的事情？使用 XML，您将能够直接从 ViewModel 访问 card.id，这里它们没有 ID。

检查按钮是否被按下然后为其创建状态的唯一方法是将其传递给行并通过 for 循环运行吗？

这似乎比获取一个简单的 ID 要复杂得多。

Answer 1

在 Compose 中，您无法通过 ID 访问视图。唯一的方法是操纵用于构建它的状态。

我建议你从 this youtube video which explains the basic principles of when you need to use state in compose. You can continue deepening your knowledge with state in Compose documentation 开始。

在您的情况下，您可以创建一个可变的字符串状态列表，基于此列表构建您的视图，并使用按索引的按钮更新它。

这是您要执行的操作的基本示例：

val cards = remember { List(6) { "" }.toMutableStateList() }
var editingIndex by remember { mutableStateOf(0) }
Column {
    Row {
        val editButton = @Composable { text: String ->
            Button({
                cards[editingIndex] = text
                editingIndex += 1
            }) {
                Text(text)
            }
        }
        editButton("A")
        editButton("B")
    }
    cards.chunked(cards.count() / 2).forEach { rowCards ->
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            rowCards.forEach {
                MyCard(it)
            }
        }
    }
}

Jetpack Compose - 访问 row/grid 中的特定项目

Jetpack Compose - Access specific item in row/grid

android

kotlin

android-jetpack-compose