JetPack Compose - 使用状态提升

Question

开始学习 JetPack Compose。我现在正在为国家托管而苦苦挣扎。我有一个简单的示例来按下按钮以在 Text 组件中显示数组的内容。如果变量在我的@Composable 中，我可以让它工作。在应用状态提升（为我的可组合变量获取变量）时，我发现了一些问题。

这是运行良好的代码

 var listadoNumeros = listOf<Int>(1, 2, 3, 4, 5)
 NextValue(listadoNumeros)

 @Composable
    fun NextValue(listado: List<Int>) {
        var position by rememberSaveable {mutableStateOf (0)}
    
        Column(
            modifier = Modifier
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceAround
            ){
            Text(text = "Value in Array ${listado[position]}")
            Button(onClick = { position += 1 }) {
                Text(text = "Next")
            }}}

这是无法正常工作的代码

    var listadoNumeros = listOf<Int>(1, 2, 3, 4, 5)
    var n by rememberSaveable {mutableStateOf (0)}
    NextValue(position = n,listadoNumeros)

@Composable
fun NextValue(position:Int,listado: List<Int>) {

    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround

    ) {
        Text(text = "Value in Array ${listado[position]}")
        Button(onClick = { position += 1 }) {
            Text(text = "Next")
        }}}

如您所料，错误消息是“position 无法重新分配”。我明白为什么，但不知道如何解决它。我在TextField等中阅读了onValueChanged，但不知道它是否适用于此。

Answer 1

position += 1 等价于position = position + 1。在 Kotlin 中，函数参数是 val 并且不能在函数范围内重新分配。这就是编译器会抱怨并阻止你这样做的原因。

您要做的是在函数中添加一个额外的事件回调，并在函数调用站点执行此添加。

@Composable
fun NextValue(position: Int, listado: List<Int>, onPositionChange: (Int) -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround

    ) {
        Text(text = "Value in Array ${listado[position]}")
        Button(onClick = { onPositionChange(position + 1) }) {
            Text(text = "Next")
        }
    }
}

您可以将上述可组合用作

val listadoNumeros = listOf<Int>(1, 2, 3, 4, 5)
var n by remember { mutableStateOf(0) }
NextValue(position = n, listadoNumeros, onPositionChange = { newPosition -> n = newPosition})

每当用户点击按钮时，都会向调用者发送一个事件，调用者决定如何处理更新的信息。在这种情况下，使用更新的值重新创建可组合。