mutableStateOf 结合数组无法刷新界面值？技术求助

Compose的mutableStateOf是通过检测值的引用变化来触发界面重组的：

• 对于oneValue这类不可变类型（String在Kotlin里是不可变的，赋值会生成新引用），修改时会替换mutableStateOf持有的引用，所以能触发刷新。
• 数组是可变引用类型：修改数组内部元素时，数组本身的引用没变化；直接修改外部的stringValues0也不会改变remember中保存的stringValue的引用，Compose检测不到变化，自然不会更新界面。

方案1：替换整个数组（改变引用） #

修改数组时，不要直接修改元素，而是创建一个新数组赋值给stringValue，让mutableStateOf检测到引用变化：

var stringValues0 = arrayOf("1", "2")
var oneValue0 = "1"

@Composable
fun showThem() { 
    var stringValue by remember { mutableStateOf(stringValues0) }
    var oneValue by remember { mutableStateOf(oneValue0) }

    Column {
        Text(text = oneValue)
        // 示例：点击按钮修改数组
        Button(onClick = {
            // 创建新数组替换原引用
            stringValue = arrayOf("3", "4")
            // 或者修改单个元素后生成新数组
            // stringValue = stringValue.copyOf().apply { this[0] = "修改后的值" }
        }) {
            Text("修改数组")
        }

        Row {
            for(k in stringValue.indices) {
                Text(text = stringValue[k])
            }
        }
    }
}

方案2：使用Compose可观察集合（推荐） #

用mutableStateListOf替代普通数组，它是Compose专门设计的可观察集合，修改元素时会自动通知Compose触发重组：

var stringValues0 = arrayOf("1", "2")
var oneValue0 = "1"

@Composable
fun showThem() { 
    // 将数组转为可观察的StateList
    val stringValue = remember { mutableStateListOf(*stringValues0) }
    var oneValue by remember { mutableStateOf(oneValue0) }

    Column {
        Text(text = oneValue)
        // 示例：点击按钮修改单个元素
        Button(onClick = {
            // 直接修改元素，自动触发刷新
            stringValue[0] = "修改后的值"
        }) {
            Text("修改数组元素")
        }

        Row {
            for(k in stringValue.indices) {
                Text(text = stringValue[k])
            }
        }
    }
}

注意点 #

• 不要直接修改remember外部的stringValues0，因为remember会在Compose重组时保留之前的状态，外部变量的变化不会同步到remember内部的stringValue。
• 如果必须使用数组，一定要保证每次修改都替换整个数组的引用，不能只改内部元素。

内容的提问来源于stack exchange，提问作者Hope