Jetpack Compose：跨Activity修改状态时如何触发UI重组

场景与问题 #

我有两个使用Jetpack Compose构建UI的Activity：ActivityOne.kt和ActivityTwo.kt。在ActivityOne中，通过AnimatedVisibility根据ViewModel中的showText状态变量控制Text组件的显示与隐藏——当ActivityOne可见时修改该值可正常触发UI变化。

需求 #

• 从ActivityOne跳转到ActivityTwo，前者保留在后台栈中不销毁；
• 在ActivityTwo中通过Switch组件切换showText的值；
• 用户返回时，ActivityTwo调用finish()销毁，回到ActivityOne；
• 若showText值已修改，ActivityOne的Text组件需自动更新显示状态。

问题现象 #

尽管showText的值已改变，但ActivityOne的UI未触发重组，无法更新显示。

原代码 #

ActivityOne.kt #

class ActivityOne : ComponentActivity() {

    private lateinit var vm: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val vmFactory = MainViewModelFactory()
        vm = ViewModelProvider(this, vmFactory).get(MainViewModel::class.java)
        setContent {
            MyTheme {
                Surface {
                    MyUI()
                }
            }
        }
    }

    @Composable
    fun MyUI() {
        AnimatedVisibility(visible = myPrefs.showText) {
            Text("Some text")
        }
    }
}

MainViewModel.kt #

class MainViewModel : ViewModel() {
    companion object {
        val myPrefs by mutableStateOf( AppPrefs() )
    }
}

ActivityTwo.kt #

class ActivityTwo : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyTheme {
                Surface {
                    MyUI2()
                }
            }
        }
    }

    @Composable
    fun MyUI2() {
        val showText = remember {
            mutableStateOf(MainViewModel.myPrefs.showText)
        }

        Switch(
            checked = showText.value,
            onCheckedChange = {
                showText.value = it
                MainViewModel.myPrefs.showText = it
            }
        )
    }
}

AppPrefs.kt #

class AppPrefs {
    var showText: Boolean = false
}

核心原因 #

AppPrefs中的showText是普通变量而非可观察的状态变量。即使MainViewModel的myPrefs用mutableStateOf包裹，mutableStateOf仅监听对象引用的变化，而非对象内部属性的变化。修改AppPrefs.showText时，myPrefs的引用并未改变，因此Jetpack Compose无法感知到状态变化，也就不会触发UI重组。

解决方案 #

修改AppPrefs.kt，将showText改为可观察状态 #

把普通变量替换为mutableStateOf，让属性变化能被Compose感知：

class AppPrefs {
    var showText by mutableStateOf(false)
}

修改MainViewModel.kt，移除不必要的mutableStateOf包裹 #

因为AppPrefs内部的属性已经是可观察状态，无需再用mutableStateOf包裹整个实例：

class MainViewModel : ViewModel() {
    companion object {
        val myPrefs = AppPrefs()
    }
}

修正ActivityOne.kt的UI引用 #

确保MyUI能正确观察到ViewModel中的状态变量：

class ActivityOne : ComponentActivity() {

    private lateinit var vm: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val vmFactory = MainViewModelFactory()
        vm = ViewModelProvider(this, vmFactory).get(MainViewModel::class.java)
        setContent {
            MyTheme {
                Surface {
                    MyUI(vm)
                }
            }
        }
    }

    @Composable
    fun MyUI(vm: MainViewModel) {
        AnimatedVisibility(visible = vm.myPrefs.showText) {
            Text("Some text")
        }
    }
}

修正ActivityTwo.kt的Switch状态绑定 #

直接绑定到共享的myPrefs.showText，无需额外创建本地状态：

class ActivityTwo : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyTheme {
                Surface {
                    MyUI2()
                }
            }
        }
    }

    @Composable
    fun MyUI2() {
        val showText = MainViewModel.myPrefs.showText

        Switch(
            checked = showText,
            onCheckedChange = {
                MainViewModel.myPrefs.showText = it
            }
        )
    }
}

效果说明 #

修改完成后，当在ActivityTwo中切换Switch时，AppPrefs.showText的变化会被Compose感知。当用户返回ActivityOne时，Compose会自动触发重组，更新AnimatedVisibility的显示状态，Text组件会根据最新的showText值显示或隐藏。

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