Jetpack Compose 列表

延迟列表

系统会对所有列表项进行组合和布局,无论它们是否可见,因此如果您需要显示大量列表项(或长度未知的列表),则使用 [Column] 等布局可能会导致性能问题。

Compose 提供了一组组件,这些组件只会对在组件视口中可见的列表项进行组合和布局。这些组件包括 [LazyColumn] 和 [LazyRow]

`item()`\] 用于添加单个列表项,\[`items(Int)`\] 用于添加多个列表项: ![image.png](https://file.jishuzhan.net/article/1778350224218001410/e72332824a9576042ab4ab31d57fd791.webp) ```ts LazyColumn(modifier = modifier.fillMaxWidth(), contentPadding = PaddingValues(top = 100.dp)) { // Add a single item item { Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Black).padding(all = 15.dp), text = "First item", color = Color.White) } // Add 5 items items(5) { index -> Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Blue).padding(all = 15.dp), text = "Item: $index", color = Color.White) } // Add another single item item { Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Green).padding(all = 15.dp), text = "Last item") } } ``` 还有许多扩展函数可用于添加列表项的集合,例如 `List`。借助这些扩展函数,我们可以轻松迁移上述 \[`Column`\] 示例 ![image.png](https://file.jishuzhan.net/article/1778350224218001410/cecc86bf140c9779951fbbdbea50ed36.webp) ```ts @Composable private fun example2(modifier:Modifier = Modifier) { val messages = arrayListOf("Title1","Title2", "Title3", "Title4", "Title5", "Title6", "Title7", "Title8") /** * import androidx.compose.foundation.lazy.items */ LazyColumn(modifier = modifier, contentPadding = PaddingValues(top = 100.dp)) { items(messages) { message -> MessageRow(message) } } } @Composable private fun MessageRow(message:String) { ElevatedCard( elevation = CardDefaults.cardElevation( defaultElevation = 6.dp ), modifier = Modifier .fillMaxWidth() .height(150.dp) .padding(start = 15.dp, end = 15.dp, top = 15.dp) ) { Text( text = message, modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } } ``` [上一篇 Jetpack Compose 分页器 Pager](https://juejin.cn/post/7356044171242864666 "https://juejin.cn/post/7356044171242864666")

相关推荐
李斯维2 天前
Android Jetpack 简介:由来和演进
android·android studio·android jetpack
我命由我123452 天前
Android Framework P1 - 低配学习 Framework 方案、开机启动 Init 进程
android·c语言·c++·学习·android jetpack·android-studio·android runtime
alexhilton2 天前
Android上的ZeroMQ:用发布/订阅模式连接Linux服务
android·kotlin·android jetpack
木子予彤4 天前
Jetpack Compose 的高性能下拉刷新与上拉加载更多组件
android jetpack
李斯维7 天前
Android 沉浸式(Edge-to-Edge)的介绍与应用
android·android jetpack
我命由我123457 天前
Jetpack Compose - 设置 Compose 编译器、设置 Compose 依赖项
android·java·java-ee·kotlin·android jetpack·android-studio·android runtime
帅次8 天前
深入 MaterialTheme:掌握 ColorScheme 与 Typography 的设计核心
android·kotlin·gradle·android jetpack·compose
simplepeng8 天前
如何减少 89% 的重组,每个Compose开发者都需要的技巧 - derivedStateOf
android·android jetpack
帅次8 天前
Navigation Compose:NavHost、NavController 与参数
android·kotlin·gradle·android jetpack·compose