原文：Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn) - Stars-One的杂货小窝

经过前面的学习,大致上已掌握了compose的基本使用了,本篇继续进行扩展,讲解下载Compose中的列表控件LazyRow和LazyColumn

之前也是讲解Jetpack Compose学习(6)——关于Modifier的妙用 | Stars-One的杂货小窝,可以通过Modifier属性将Row和Column组件改造为可滑动的

但是如果你需要显示大量的项目（或一个未知长度的列表），使用像 Column 这样的布局会导致性能问题，因为所有的项目都会被组合和布局，无论它们是否可见。

本系列以往文章请查看此分类链接Jetpack compose学习

基本使用

这里由于LazyRow和LazyColumn用法相似,只是展示的方向不同,所以便是不各自分个章节出来了,下文以LazyColumn为例讲解

@SuppressLint("UnrememberedMutableState")
@Preview(showBackground = true)
@Composable
fun ListPageDemo() {

    //可触发重组的List
    val list = arrayListOf<String>()

    //构造数据
    repeat(30) {
        list.add("卡片$it")
    }
    
    ComposeDemoTheme {
        Column() {
            LazyColumn {
                items(list) {
                    Text(
                        it, modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                    )
                }
            }
        }
    }

}

效果如下所示:

上面主要使用了LazyListScope里提供的items方法来构造列表

除此之外,LazyListScope也是提供了几个不同的方法来构造列表

LazyColumn {
    // 添加单个项目
    item {
        Text(text = "First item")
    }

    // 添加五个项目
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // 添加其他单个项目
    item {
        Text(text = "Last item")
    }
    
}

可观察数据列表 mutableStateListOf()

上面那种,由于我们是使用的基本数据类型的ArrayList,所以在列表数据发生变更时,不会触发重组

如果我们想要实现可触发重组的数据列表,可以使用Compose中提供的mutableStateListOf()方法来创建数据列表

如下面例子:

@SuppressLint("UnrememberedMutableState")
@Preview(showBackground = true)
@Composable
fun ListPageDemo() {

    //可触发重组的List
    val list = mutableStateListOf<String>()

    repeat(30) {
        list.add("卡片$it")
    }
    ComposeDemoTheme {
        Box(modifier = Modifier) {
            Column() {
                LazyColumn {
                    items(list) {
                        Text(
                            it, modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                        )
                    }
                }
            }
            //设置靠右下角
            Column(
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.Bottom,
                modifier = Modifier.fillMaxSize().padding(end = 16.dp,bottom = 16.dp)
            ) {
                FloatingActionButton(onClick = {
                    //移除列表最后一个数据
                    list.removeLast()
                }) {
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = null
                    )
                }
                FloatingActionButton(onClick = {
                    //添加一个新的数据
                    val time = System.currentTimeMillis()
                    list.add(time.toString())
                }) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = null
                    )
                }
            }
        }

    }
}

为了方便演示,加了两个悬浮按钮,用来测试数据的增加和删除,效果如下所示:

mutableStateListOf()方法返回的类型是SnapshotStateList,此类型和ArrayList一样,有着相关的添加,移除数据等方法,同时还能触发Compose中的重组操作

属性

我们从构造方法来看下LazyColumn具有什么参数可以设置

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(),
    content: LazyListScope.() -> Unit
){}

modifier想必也不用多说了,不清楚了可以看下前面的文章

FlingBehavior这个属性是用于定义滑动动作释放后的速度变化逻辑的，比如，当滑动动作释放后，列表还将继续滑动，速度依时递减

此属性有点不太常用,就不讲解了

由于state这个属性涉及东西较多,所以单独放在后面讲解

contentPadding

此属性主要是用来设置内边距的,取值为PaddingValues

PaddingValues方法的参数有三种,根据需要选择即可:

• PaddingValues(all:Dp)
• PaddingValues(horizontal: Dp, vertical: Dp)
• PaddingValues(start: Dp = 0.dp,top: Dp = 0.dp,end: Dp = 0.dp,bottom: Dp = 0.dp)

示例代码(设置内边距为16dp):

LazyColumn(contentPaddin