Jetpack Compose：异步加载内容到LazyColumn后界面为空问题

你代码的核心问题在于状态更新没有触发Compose重组：

• 你用mutableStateOf(ArrayList<JSONObject>(emptyList()))维护电影列表，ArrayList是可变集合，但mutableStateOf仅会在引用发生变化时触发重组。
• 调用movies.addAll(result)只是修改了ArrayList内部的元素，集合本身的引用没变化，所以Compose感知不到数据更新，LazyColumn自然不会刷新显示内容。

以下是两种可行的修复方式：

方式1：使用Compose可观察列表（推荐） #

用mutableStateListOf替代mutableStateOf(ArrayList)，它是Compose专门提供的可观察集合，内部元素增删改都会自动触发重组：

// 替换原有的movies声明
val movies = remember { mutableStateListOf<JSONObject>() }

LaunchedEffect(true) {
    // LaunchedEffect本身就在协程环境中，无需额外嵌套launch
    val result = getTrendingMoviesAsync()
    result?.let { movies.addAll(it) }
}

LazyColumn(modifier = Modifier.padding(top = 135.dp)){
    items(movies){ movie ->
        Text(text = movie.getString("title"))
        Spacer(modifier = Modifier.height(10.dp))
    }
}

方式2：强制更新状态引用 #

如果坚持用ArrayList，可以在修改集合后，重新赋值一个新的ArrayList实例，让mutableStateOf检测到引用变化：

var movies by remember { mutableStateOf(ArrayList<JSONObject>(emptyList())) }

LaunchedEffect(true) {
    val result = getTrendingMoviesAsync()
    if (result != null){
        movies.addAll(result)
        // 重新赋值新的集合实例，触发重组
        movies = ArrayList(movies)
    }
}

// LazyColumn代码不变

1. 避免直接使用JSONObject：建议定义数据类（比如data class Movie(val title: String, ...)），结合Gson或Moshi解析JSON，类型更安全，也避免getString可能抛出的异常。
2. OkHttpClient单例化：不要每次请求都创建新的OkHttpClient实例，全局单例复用可以提升性能。

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