LazyColumn是一种垂直滚动的列容器,用于显示大量项目的列表。具有以下特点:
-
惰性加载:LazyColumn仅在需要时加载和绘制列表项,而不会一次性加载整个列表。这种惰性加载的机制可以提高性能,并且适用于非常大的列表。
-
无限滚动:LazyColumn支持无限滚动,可以动态加载更多的列表项。通过使用LazyColumn的onScroll事件和加载更多数据的逻辑,可以实现无限滚动的效果。
-
自动测量:LazyColumn会自动计算和测量列表项的大小,因此您不需要手动指定列表项的大小。这使得在不同的屏幕尺寸或设备方向下适应不同大小的列表项变得更加简单。
-
可变项高度:LazyColumn可以处理项目高度的变化,例如在项目中添加或删除元素时。它会自动调整滚动位置和列表项布局,以适应更改后的列表。
下面通过一个实例说明LazyColumn的使用方法
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyColumnSample1() {
val items = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20)
var height: Dp
with(LocalDensity.current) {
height = 300.toDp()
}
val state = rememberLazyListState()
val scope = rememberCoroutineScope()
LazyColumn(state = state) {
stickyHeader {
Text(
"Header", modifier = Modifier
.fillMaxWidth()
.background(Color.White)
.padding(vertical = 10.dp)
.clickable {
// scope.launch { state.animateScrollToItem(2) }
},fontSize = 22.sp
)
}
items(items) {
Text(
text = "Column Item :$it", modifier = Modifier
.height(height),
fontSize = 20.sp
)
Divider()
DisposableEffect(Unit) {
Log.d("LazyColumn", "effect:$it")
onDispose {
Log.e("LazyColumn", "onDispose:$it")
}
}
}
}
}
在LazyColumn中,stickyHeader 添加粘性头部,items添加条目,效果如下图所示。
通过打印日志,当item显示时打印effect,当item销毁时打印onDispose,打印日志情况如下。
一开始只显示8个item,当往下滑动时,才会创建可见的item,同时销毁不可见的item,对于有大量数据的列表,不用一下子创建大量的对象,从而有效利用内存。
与LazyColumn类似的是LazyRow,它们的区别是方向不一样,前者是垂直方向,后者是横向。
LazyVerticalGrid
默认情况下,LazyColumn每一行只有一个item,如果需要有多个item,可以使用LazyVertivalGrid,示例如下
在LazyVertivalGrid中,通过columns控制列数,这里设置为2,表示2两列,多行多列就形成了一个表格。
示例代码已上传到github,链接如下