Compose | UI组件(十二) | Lazy Layout - 列表

本文链接：https://blog.youkuaiyun.com/tanzuai/article/details/135929737

本文详细介绍了JetpackCompose中的LazyListScope、LazyColumn和LazyRow组件，涉及内容包括作用域、基本使用、边距设置、rememberLazyListState的利用以及items(key)对性能的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
总结

前言

现在应用市场上很多产品都少不了列表展示需求场景，例如通讯录，短信，音乐列表等等。

所以本篇文章讲解的组件 - 列表（LazyList 和 LazyRow ）

在了解 LazyList 和 LazyRow 之前，我们先了解下 LazyListScope作用域

LazyListScope作用域用来干什么？

LazyColumn 和 LazyRow 内部都是继承 LazyList组件 实现，但 LazyList 不能直接使用

LazyList 的 content 是一个 LazyListScope.() -> Unit 类型的作用域
LazyListScope 提供了 item , items(Int) , item(List) , itemsIndexed(List) 扩展函数来展示列表内容

item：展示单项数据
items(Int)：展示多项整型数据
items(List) 展示一组集合数据
itemsIndexed(List) 展示一组集合数据，并且带有下标

val list = ('A'..'Z').map {
    it.toString() }
LazyColumn{
   
    item {
    Text(text = "first item") }
    
    items(10){
    index ->
        Text(text = "$index")
    }

    item {
    Text(text = "last item") }

    items(list){
     item ->
        Text(text = item)
    }

    itemsIndexed(list){
    index, item ->
        Text(text = "$index/$item")
    }
}

LazyColumn组件含义？

LazyColumn 就是一个纵向滚动列表，用来显示一组纵向数据，并且可以滑动列表

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,                                     //修饰符
    state: LazyListState = rememberLazyListState(),                    //记录列表位置状态
    contentPadding: PaddingValues = PaddingValues(0.dp),               //整体内容周围的一个边距
    reverseLayout: Boolean = false,                                    //是否反转列表
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,   //子组件纵向对齐方式
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,       //子组件横向对齐方式
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(), //fling行为处理逻辑
    userScrollEnabled: Boolean = true,                                 //是否允许滑动
    content: LazyListScope.() -> Unit                                  //LazyList作用域
)

LazyColumn的基本使用

LazyColumn 组件相比传统的 RecyclerView 少写很多代码
RecyclerView 需要在xml中声明一个RecyclerView控件，再在xml中声明一个子控件，再创建一个适配器Adapter，最后在activity中指定 RecyclerView 的布局类型，再为其填充数据
LazyColumn 就很简单了，看如下代码的实现，就知道了

@Composable
fun LazyColumnList() {
   
    LazyColumn {
   
        items(20) {
    i ->