JetpackCompose LazyColumn列表

---

概况

顾名思义，懒人列表 LazyColumn，同理还有横向格式的 LazyRow，但是不常用；

LazyColumn 可以替代掉 Column，它解决了原生 android 中书写适配器的麻烦；

基本结构

lazycolumn 需要设置一个 state，即 rememberLazyListState；

items 表示该列表重复的次数；

SingleCard(index = it) 这是复用了一个组件，其中的 it 表示当前渲染的列表索引；

// 记录lazy状态
val lazyState = rememberLazyListState()

LazyColumn(state = lazyState) {
    items(100) {
        SingleCard(index = it)
    }
}

回到顶部与底部

下面代码渲染后如图

rememberCoroutineScope 设置一个协程状态，因为滚动到顶部或者底部执行动画必须要流畅且防抖，那么最好的办法就是使用一个协程来执行该动画；

coroutineScope.launch 启动协程

lazyState.animateScrollToItem(0) 设置从当前位置跳转到索引为 0 的列表位置（即回到顶部）；同理回到底部就把索引改一下就好了！

@Composable
fun ScrollList() {
    val lazyState = rememberLazyListState()

    // 记录列表项总个数，便于取出索引值
    val listSize = 100
    // 记录协程状态
    val coroutineScope = rememberCoroutineScope()
    Column() {
        Row() {
            Button(
                modifier = Modifier.weight(1f),
                // 回到顶部事件触发点
                onClick = { coroutineScope.launch { lazyState.animateScrollToItem(0) } }) {
                Text(text = "回到顶部")
            }
            Button(
                modifier = Modifier.weight(1f),
                // 回到底部事件触发点
                onClick = { coroutineScope.launch { lazyState.animateScrollToItem(listSize - 1) } }) {
                Text(text = "回到底部")
            }
        }

        LazyColumn(state = lazyState) {
            items(100) {
                SingleCard(index = it)
            }
        }
    }
}