如何将Composable居中于LazyColumn列表项的可见区域中部

问题场景与需求 #

在使用LazyColumn实现包含不同高度可滑动项的列表时，需要让可滑动Composable的背景居中于当前滑动项的可见区域。但部分列表项高度可能超过屏幕总高度，若仅基于项的整体中部来居中背景，会导致背景部分甚至完全移出视野。

效果对比 #

• 当前问题效果：
  
• 期望实现效果（参考Reddit应用Relay）：
  

解决方案思路 #

核心是基于列表项的可见区域而非整体高度计算背景居中位置：

1. 借助LazyListState实时获取当前项在屏幕视口中的可见范围
2. 计算可见区域的中心坐标，对比屏幕视口中心，调整背景的偏移量
3. 通过协程监听列表滚动状态，动态更新背景位置

实现代码 #

自定义可滑动项组件 #

@Composable
fun SwipeableItemWithCenteredBackground(
    lazyListState: LazyListState,
    itemIndex: Int,
    modifier: Modifier = Modifier,
    backgroundContent: @Composable () -> Unit,
    content: @Composable () -> Unit
) {
    val visibleRect = remember { mutableStateOf(Rect.Zero) }

    // 监听可见项变化，实时更新当前项的可见区域
    LaunchedEffect(lazyListState) {
        snapshotFlow {
            lazyListState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == itemIndex }
        }.collect { visibleItemInfo ->
            visibleItemInfo?.let { info ->
                val viewportStart = lazyListState.layoutInfo.viewportStartOffset
                val visibleTop = info.offset - viewportStart
                val visibleBottom = visibleTop + info.size
                visibleRect.value = Rect(
                    left = 0f,
                    top = visibleTop.toFloat(),
                    right = lazyListState.layoutInfo.viewportSize.width.toFloat(),
                    bottom = visibleBottom.toFloat()
                )
            }
        }
    }

    Box(modifier = modifier) {
        // 背景内容：基于可见区域居中
        Box(
            modifier = Modifier
                .fillMaxSize()
                .align(Alignment.Center)
                .offset {
                    // 计算可见区域中心与屏幕视口中心的偏移量
                    val visibleCenterY = visibleRect.value.centerY()
                    val viewportCenterY = lazyListState.layoutInfo.viewportSize.height / 2f
                    IntOffset(0, (viewportCenterY - visibleCenterY).roundToInt())
                }
        ) {
            backgroundContent()
        }
        // 前景可滑动内容
        content()
    }
}

在LazyColumn中使用 #

val lazyListState = rememberLazyListState()
// 示例列表数据
val itemsList = remember { List(10) { "列表项 $it" } }

LazyColumn(state = lazyListState) {
    items(itemsList) { item ->
        val itemIndex = itemsList.indexOf(item)
        SwipeableItemWithCenteredBackground(
            lazyListState = lazyListState,
            itemIndex = itemIndex,
            backgroundContent = {
                // 自定义背景，示例为蓝色方块
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .background(Color(0xFF2196F3))
                )
            }
        ) {
            // 可滑动项内容，此处以Swipeable为例
            Swipeable(
                state = rememberSwipeableState(initialValue = 0),
                anchors = mapOf(
                    0f to 0,
                    200f to 1
                ),
                thresholds = { _, _ -> FractionalThreshold(0.3f) }
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(if (itemIndex % 3 == 0) 800.dp else 200.dp) // 模拟不同高度项
                        .background(Color.White)
                        .padding(16.dp)
                ) {
                    Text(text = item, fontSize = 20.sp)
                }
            }
        }
    }
}

关键说明 #

• 通过snapshotFlow监听LazyListState的布局变化，确保可见区域数据实时更新
• 计算偏移量时，以屏幕视口中心为基准，将背景对齐到当前项可见区域的中心，避免背景移出视野
• 适配任意高度的列表项，无论项是否超出屏幕，背景始终保持在可见区域内居中

内容的提问来源于stack exchange，提问作者Roberto Leinardi