Jetpack Compose 文本未更新

Question

我正在尝试井字游戏示例项目。一旦用户执行点击，我就会收到回调，但在尝试更新文本时，它基本上不会更新文本。下面是我的代码，请帮助。到目前为止，我已经尝试过需要在文本下方放置闭嘴所以错误 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla:

enum class Player {
    Human, Computer
}

var board = arrayListOf("", "", "", "", "", "", "", "", "")
private var currentPlayer = Player.Computer

fun updatePosition(position: Int) {
    if (board[position].isEmpty())
        if (currentPlayer == Player.Human) {
            board[position] = "X"
            currentPlayer = Player.Computer
        } else {
            board[position] = "O"
            currentPlayer = Player.Human
        }
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ComposeTicTacToeTheme {
            Surface(
                modifier = Modifier.fillMaxWidth(),
                color = MaterialTheme.colors.background
            ) {
                Greeting(board, this::updatePosition)
            }
        }
    }
}

@Composable
fun Greeting(board: ArrayList<String>, onclick: (Int) -> Unit) {
    Column{
        Row {
            Cell(board[0]) { onclick(0) }
            Cell(board[1]) { onclick(1) }
            Cell(board[2]) { onclick(2) }
        }
        Row {
            Cell(board[3]) { onclick(3) }
            Cell(board[4]) { onclick(4) }
            Cell(board[5]) { onclick(5) }
        }
        Row {
            Cell(board[6]) { onclick(6) }
            Cell(board[7]) { onclick(7) }
            Cell(board[8]) { onclick(8) }
        }
    }
}

@Composable
fun Cell(
    name: String,
    onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .width(130.dp)
            .height(130.dp)
            .padding(12.dp),
        elevation = 8.dp,
        contentColor = Color.Black,
        shape = RoundedCornerShape(80.dp),
        onClick = onClick
    ) {
        Text(
            name, fontSize = 80.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .background(color = Color.Yellow)
        )
    }
}

Answer 1

为了让 Compose 知道需要重组，您必须为您的值使用特殊的 State 包装器。如果是数组，您可以使用 mutableStateListOf 而不是 arrayListOf:

val board = mutableStateListOf("", "", "", "", "", "", "", "", "")

有关更多详细信息，我建议您从 Compose documentation, including this youtube video 中的状态开始，它解释了基本原理。

Jetpack Compose 文本未更新

Jetpack Compose text is not getting updated

android

android-jetpack-compose

android-jetpack-compose-text