一、实现过程
在Jetpack开发中,可使用 LazyListState API实现。
LazyListState 是 Jetpack Compose 中用于跟踪LazyColumn 或LazyRow 列表滚动状态的一个组件。通过LazyListState,可以在构建列表时传递给列表组件,然后通过访问属性来获取列表的滚动状态信息,例如列表的滚动偏移量、可见项的信息等。同时还可以使用 LazyListState 的方法来控制列表滚动到指定位置。
判断条件:remember { derivedStateOf { state.layoutInfo } }.value.visibleItemsInfo.lastOrNull()?.index == list.size - 1
- state.layoutInfo返回了当前列表的布局信息,包括可见项的信息等。
- visibleItemsInfo包含了当前可见的项的信息,通过 lastOrNull() 获取到最后一个可见项的信息。
- ?.index 用来获取最后一个可见项的索引。
最终判断条件为:最后一个可见项的索引是否等于列表中最后一项的索引, 如果相等则意味着已经滚动到了列表的底部。
显然跟web一样,该条件会连续多次触发,此时需要对其进行防抖优化。
防抖方式已发布,这里不再赘述。
二、最终代码
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
val handler = Handler(Looper.getMainLooper())
val list by remember { mutableStateOf(arrayOf(1, 2, 3, 4, 5)) }
val state = rememberLazyListState()
Column(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(20.dp),
state = state
) {
items(items = list) { item ->
Card(
modifier = Modifier
.fillMaxWidth()
.height(300.dp)
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
.padding(vertical = 16.dp)
) {
Text(
text = item.toString(),
textAlign = TextAlign.Center,
modifier = Modifier
.wrapContentHeight()
)
}
}
if (remember { derivedStateOf { state.layoutInfo }
}.value.visibleItemsInfo.lastOrNull()?.index == list.size - 1) {
val task = Runnable { Log.d("到底了", "获取新数据 ") }
handler.removeCallbacks(task)
handler.postDelayed(task, 500)
}
}
}
}
}