如何将内容异步加载到 LazyColumn (Jetpack Compose)？

Question

在我的 Jetpack Compose Android 应用程序中，我尝试将内容异步加载到 LazyColumn 中。我看到控制台中显示了电影的标题（请参阅 getTrendingMoviesAsync() 方法中的 println），但 Android 应用程序中 LazyColumn 所在的屏幕仍为空

这是我的代码：

主屏幕类：

var movies by remember { mutableStateOf(ArrayList<JSONObject>(emptyList())) }
            val coroutineScope = rememberCoroutineScope()
            
            LaunchedEffect(true) {
                coroutineScope.launch { 
                    val result = getTrendingMoviesAsync()
                    if (result != null){
                        movies.addAll(result)
                    }
                }
            }

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

方法：

suspend fun getTrendingMoviesAsync(): ArrayList<JSONObject>? {
    return withContext(Dispatchers.IO) {
        try {
            val movies = ArrayList<JSONObject>()
            val client = OkHttpClient()
            val request = Request.Builder()
                .url("https://api.themoviedb.org/3/trending/movie/week?language=de-DE")
                .get()
                .addHeader("accept", "application/json")
                .addHeader(
                    "Authorization",
                    "Bearer <apikey>"
                )
                .build()

            val response = client.newCall(request).execute()
            val json = JSONObject(response.body()?.string())
            val results = json.getJSONArray("results")
            for (i in 0 until results.length().coerceAtMost(30)) {
                val movie = results.getJSONObject(i)
                println(movie.getString("title"))
                movies.add(movie)
            }

            movies
        } catch (e: Exception) {
            e.printStackTrace()
            null
        }
    }
}

Answer 1

要强制重组，您可以向 LazyColumn 添加 key 或使用依赖于电影列表的状态变量，考虑使用 StateFlow 进行数据管理。

你可以这样做:-

val isDataLoaded = remember { mutableStateOf(false) }

LazyColumn(
    modifier = Modifier.padding(top = 135.dp),
    key = isDataLoaded // Trigger recomposition when data changes
) {
    items(movies) { movie ->
        Text(text = movie.getString("title"))
        Spacer(modifier = Modifier.height(10.dp))
    }
}

LaunchedEffect(true) {
    movies.addAll(result)
    isDataLoaded.value = true /
}