Jetpack Compose中如何实现带remember状态的全局可修改变量？

问题分析 #

你之前的两种写法都存在问题：

• 第一种写法中，cardsList是Main函数内部的remember { mutableStateOf(...) }，仅能在Main内部访问，无法在外部修改。
• 第二种写法使用全局普通变量，不属于Compose的可观察状态，修改后无法触发UI重组，因此UI不会更新。

用类封装状态的可行方案 #

用类封装状态是完全可行的，核心是让类内部的列表使用**MutableState**持有，这样Compose才能监听变化并触发UI自动重组。下面提供两种实现方式：

方式1：自定义状态类 #

创建封装可观察列表的类，在Compose中用remember持有实例并跨组件传递：

// 自定义状态类，内部用MutableState管理列表
class CardState {
    var cardsList: List<String> by mutableStateOf(listOf("Test1", "Test2"))
}

@Composable
fun Main() {
    // 用remember持有状态实例，保证重组时不会重复创建
    val cardState = remember { CardState() }
    
    Column {
        // 将状态实例传递给子Composable
        Cards(cardState)
        
        // 示例：在持有cardState的任何位置修改列表（这里是Main内部的按钮）
        Button(onClick = {
            cardState.cardsList = listOf("新增项1", "新增项2")
        }) {
            Text("更新列表")
        }
    }
}

@Composable
fun Cards(cardState: CardState) {
    // 遍历可观察列表，修改时自动触发重组
    cardState.cardsList.forEach { item ->
        Button(onClick = {
            // 移除选中项并更新状态列表
            cardState.cardsList = cardState.cardsList.filter { it != item }
        }) {
            Text(item)
        }
    }
}

方式2：使用ViewModel（推荐） #

如果需要状态跟随页面生命周期（比如屏幕旋转不丢失状态），更推荐用ViewModel封装——它是Jetpack官方提供的状态管理类，自动关联页面生命周期：

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel

class CardViewModel : ViewModel() {
    // ViewModel内部用MutableState管理列表
    var cardsList: List<String> by mutableStateOf(listOf("Test1", "Test2"))
}

@Composable
fun Main() {
    // 获取ViewModel实例，自动绑定页面生命周期
    val cardViewModel: CardViewModel = viewModel()
    
    Column {
        Cards(cardViewModel)
        
        // 外部修改示例
        Button(onClick = {
            cardViewModel.cardsList = listOf("新卡片1", "新卡片2")
        }) {
            Text("全局更新列表")
        }
    }
}

@Composable
fun Cards(viewModel: CardViewModel) {
    viewModel.cardsList.forEach { item ->
        Button(onClick = {
            viewModel.cardsList = viewModel.cardsList.filter { it != item }
        }) {
            Text(item)
        }
    }
}

核心原理 #

Compose的UI重组依赖可观察状态：只有MutableState、StateFlow等可观察容器的值发生变化时，Compose才会自动刷新依赖这些状态的UI组件。普通变量无法被Compose监听，因此修改后不会触发重组。

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