如何让Composable在全局变量变更时自动重组以更新值？

问题背景 #

• 要实现的功能：点击悬浮窗口里的子按钮后，立刻更新对应父按钮的显示内容。试过以下方法都没用：

  • by remember { mutableStateOf() }
  • by rememberUpdatedState
  • derivedStateOf
  • ViewModel中存储全局变量

• 代码层级结构：
  顶层BoxWithConstraints包含两部分：

  1. 嵌套的Row→Column→Box层级，最终渲染父按钮列表
  2. 独立的悬浮Box，点击父按钮时显示，展示对应子按钮列表

• 核心逻辑：点击悬浮窗口中索引为i的子按钮，更新listOfAllButtons[i].childButtonIndex，触发对应父按钮重组，显示listOfAllButtons[i].childButtons[listOfAllButtons[i].childButtonIndex].name的内容

• 当前卡壳点：只有再次点击父按钮时，才会读取全局变量的新值更新显示，子按钮点击后没法立刻触发父按钮重组

解决方案 #

1. 让ButtonData的状态可观察 #

Compose只会对State类型的变更触发重组，所以别直接用普通变量存childButtonIndex，把它包装成MutableState：

data class ButtonData(
    val childButtons: List<ChildButton>,
    val childButtonIndex: MutableState<Int> = mutableStateOf(0)
)

2. 用ViewModel管理全局按钮数据 #

把listOfAllButtons放到ViewModel里，要么用mutableStateListOf，要么保证每个ButtonData里的状态都是可观察的：

class ButtonViewModel : ViewModel() {
    val listOfAllButtons = mutableStateListOf<ButtonData>().apply {
        // 初始化按钮数据
        add(ButtonData(childButtons = listOf(ChildButton("按钮1"), ChildButton("按钮2"))))
        // 添加其他按钮...
    }
}

3. 父按钮直接引用可观察状态 #

父按钮的Compose函数里，别用本地remember变量缓存状态值，直接读取ButtonData里的childButtonIndex：

@Composable
fun ParentButton(buttonData: ButtonData) {
    Button(
        onClick = { /* 触发悬浮窗口显示的逻辑 */ }
    ) {
        Text(text = buttonData.childButtons[buttonData.childButtonIndex.value].name)
    }
}

4. 子按钮点击直接更新状态 #

悬浮窗口里的子按钮点击时，直接修改对应ButtonData的childButtonIndex值即可，无需额外操作：

@Composable
fun ChildButtonItem(buttonData: ButtonData, childIndex: Int) {
    Button(
        onClick = {
            buttonData.childButtonIndex.value = childIndex
        }
    ) {
        Text(text = buttonData.childButtons[childIndex].name)
    }
}

关键注意事项 #

• 禁止用普通全局变量存储状态，必须使用Compose的State/MutableState或ViewModel中的mutableStateListOf
• 父按钮不要用本地remember变量缓存状态，直接引用数据源中的可观察状态，确保状态变更时自动触发重组
• 使用ViewModel时，要通过viewModel()函数获取实例，保证作用域正确

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