如何计算Jetpack Compose中LazyColumn最后可见项后的空白空间

要算出LazyColumn最后一个可见项到列表底部的空白空间，你可以通过LazyListState结合布局尺寸来实现，具体步骤如下：

• 先创建并持有LazyListState实例，用来获取列表的布局信息
• 监听LazyColumn的实际渲染高度
• 通过LazyListState拿到最后一个可见项的底部位置，用列表高度减去这个位置就是空白空间

完整代码示例 #

@Composable
fun LazyColumnEmptySpaceDemo() {
    val lazyListState = rememberLazyListState()
    var columnHeight by remember { mutableStateOf(0) }
    var emptySpace by remember { mutableStateOf(0) }

    LaunchedEffect(lazyListState.layoutInfo, columnHeight) {
        val lastVisibleItem = lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()
        emptySpace = if (lastVisibleItem != null) {
            // 最后可见项的底部坐标 = 项的偏移y + 项的高度
            val itemBottom = lastVisibleItem.offset.y + lastVisibleItem.size.height
            // 空白空间 = 列表总高度 - 最后可见项底部坐标
            columnHeight - itemBottom
        } else {
            // 没有可见项时，空白空间就是整个列表高度
            columnHeight
        }
    }

    Column {
        Text(text = "最后可见项后空白空间：$emptySpace px")
        LazyColumn(
            state = lazyListState,
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .onSizeChanged { size ->
                    columnHeight = size.height
                }
        ) {
            items(20) { index ->
                Text(
                    text = "列表项 $index",
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .padding(16.dp)
                )
            }
        }
    }
}

代码说明 #

• rememberLazyListState()：保存列表的滚动和布局状态，用来获取可见项的详细信息
• Modifier.onSizeChanged：监听LazyColumn的实际绘制高度，转换成像素值保存
• LaunchedEffect：当列表布局信息或列表高度变化时，自动重新计算空白空间
• visibleItemsInfo.lastOrNull()：获取最后一个可见的列表项信息，其中offset.y是项相对于列表顶部的偏移量，size.height是项自身的高度，两者相加就是项的底部位置

滚动LazyColumn时，emptySpace会实时更新，准确反映最后可见项到列表底部的空白区域大小。

内容的提问来源于stack exchange，提问作者Tippu Fisal Sheriff