如何刷新for循环中的Composable组件以触发内容重绘

问题根因 #

Jetpack Compose 的UI重组依赖对可观察状态的读取感知，你自定义的IndexState类中的index是普通Kotlin属性，Compose运行时无法跟踪它的数值变化，因此修改后不会触发对应UI的重组，就会出现日志打印正常但界面没有更新的现象。

解决方案 #

方案1：修改自定义状态类，用MutableState包裹属性

将index属性改为通过mutableStateOf托管，让Compose可以感知数值变化：

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue

class IndexState(initialIdx: Int) {
    var index by mutableStateOf(initialIdx)
}

不需要修改其他业务代码，直接运行就可以在点击后触发UI更新，显示对应行的勾选标记。

方案2：简化逻辑，直接使用内置状态

如果你的IndexState仅用来存储选中索引，没有其他封装逻辑，可以直接在Composable中声明状态，省略自定义类：

// 替换原来的remember创建IndexState的代码
val selectedIndex by remember { mutableStateOf(0) }

// 后续判断勾选逻辑改为
if(i == selectedIndex) {
    Icon(
        id = "Checked_$i",
        icon = R.drawable.checkbox
    )
}

方案3：给自定义类加@Stable注解（可选）

如果你的自定义类还有其他业务逻辑需要保留，可给类添加@Stable注解，明确告知Compose编译器该类的状态变化是可观察的，进一步优化重组性能：

import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue

@Stable
class IndexState(initialIdx: Int) {
    var index by mutableStateOf(initialIdx)
}

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