Jetpack Compose中@Composable获取ViewModel列表为空如何解决

你的代码核心问题是普通的mutableListOf不属于Compose可观察状态类型，Jetpack Compose的重组仅会被可观察状态的变化触发，你往普通集合里添加数据的操作Compose完全感知不到：

• 首次进入DataScreen执行组合时，ViewModel的异步网络请求还未返回，此时读取到的listData是空列表
• 后续网络请求返回数据存入listData后，因为状态没有可观察性，不会触发界面重组，所以界面始终停留在空列表的状态

方案1：使用Compose内置可观察集合（最简单适配） #

直接将ViewModel中的普通可变集合替换为mutableStateListOf，这个集合的增删改操作都会自动通知Compose触发重组：

class DataViewModel: ViewModel() {
    // 替换为可观察的可变列表，不需要var，集合本身可修改
    val listData = mutableStateListOf<Data>()

    init {
        viewModelScope.launch {
            val data = fetchData()
            // 直接添加元素，操作会自动触发状态通知
            listData.addAll(data)
        }
    }
}

Composable的代码不需要额外修改，直接读取model.listData遍历即可，列表变化会自动触发界面刷新。

方案2：使用StateFlow（更适合分层架构、多场景复用） #

如果你的项目遵循MVVM分层架构，ViewModel需要对外暴露无关Compose依赖的状态，可以使用StateFlow实现可观察：

class DataViewModel: ViewModel() {
    // 内部用可变StateFlow存储数据
    private val _listData = MutableStateFlow<List<Data>>(emptyList())
    // 对外暴露不可变的只读StateFlow
    val listData: StateFlow<List<Data>> = _listData.asStateFlow()

    init {
        viewModelScope.launch {
            val data = fetchData()
            // 更新StateFlow的值
            _listData.value = data
        }
    }
}

Composable中需要收集Flow的状态转换为Compose可识别的State：

@Composable
fun DataScreen(model:DataViewModel = viewModel()){
    // 收集StateFlow的状态，自动跟随生命周期管理
    val listData by model.listData.collectAsStateWithLifecycle()
    
    Column{
        listData.forEach { item ->
            Text("${item}")
        }
    }
}

注意：使用collectAsStateWithLifecycle需要提前引入lifecycle-runtime-ktx的对应版本依赖。

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