Compose导航时如何保存Chip组件的UI状态？

要解决Chip状态在页面跳转/返回后重置的问题，核心是把状态从Composable的rememberSaveable迁移到ViewModel中——ViewModel的生命周期与页面（而非单个Composable）绑定，页面跳转或返回时不会被销毁，因此状态能持久保留。

步骤1：创建保存状态的ViewModel #

定义一个ViewModel类，内部用mutableStateOf维护Chip的选中状态，Composable可以直接观察这个状态：

import androidx.lifecycle.ViewModel
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.State

class ChipViewModel : ViewModel() {
    // 私有可变状态，仅内部修改
    private val _isCatsChipSelected = mutableStateOf(false)
    // 公开不可变状态，供Composable观察
    val isCatsChipSelected: State<Boolean> = _isCatsChipSelected

    // 提供修改状态的方法
    fun updateCatsChipSelection(isSelected: Boolean) {
        _isCatsChipSelected.value = isSelected
    }
}

步骤2：修改Composable，绑定ViewModel状态 #

在CatsChip中获取ViewModel实例，将Chip的选中状态与ViewModel的状态绑定，点击时调用ViewModel的方法更新状态：

@Composable
fun CatsChip() {
    // 获取ViewModel实例（自动与当前页面生命周期绑定）
    val viewModel: ChipViewModel = viewModel()

    TextChip(
        isSelected = viewModel.isCatsChipSelected.value,
        shape = Shapes(medium = RoundedCornerShape(15.dp)),
        text = "Cats",
        selectedColor = LightGreen,
        onChecked = {
            // 通过ViewModel更新状态
            viewModel.updateCatsChipSelection(it)
        },
    )
}

关键说明 #

• ViewModel的生命周期：当你执行popBackStack或跳转到其他页面时，只要当前页面没有被销毁（比如从子页面返回），ViewModel会保留状态；即使页面因配置变更（如旋转屏幕）重建，ViewModel也会复用，状态不会丢失。
• 状态封装：用私有可变状态+公开不可变状态的方式，遵循单向数据流原则，避免Composable直接修改ViewModel内部状态，让状态变更更可控。

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