Jetpack Compose如何实现LazyRow子项从中间起始可滚动排列

不需要自定义Canvas绘制，LazyRow完全可以满足需求，不需要更换其他布局组件，核心是通过动态调整contentPadding配合列表状态监听实现，可完整复用LazyRow自带的滑动、惯性滚动、子项复用、无障碍交互等原生能力，开发成本极低。

核心实现逻辑 #

• 初始状态下给LazyRow设置等于轨道宽度1/2的起始内边距，让第一个子项默认落在轨道中间位置
• 实时监听轨道宽度、子项总宽度两个值：当所有子项总宽度小于等于轨道宽度（即所有子项可一次性完整展示）时，将起始、末尾内边距都改为0，让子项从轨道起点开始依次排列
• 子项总宽度超过轨道宽度时，同时给LazyRow设置等于轨道宽度1/2的末尾内边距，保证滚动到末尾时最后一个子项也能滑动到轨道中间位置，前后交互体验一致

可直接复用的核心代码 #

首先是定义的子项数据结构：

data class MyItem(val widthFactor: Long, val color: Color)

Track组件实现：

@Composable
fun Track(
    items: List<MyItem>,
    modifier: Modifier = Modifier
) {
    val listState = rememberLazyListState()
    val density = LocalDensity.current
    // 轨道可用宽度
    var trackWidth by remember { mutableStateOf(0.dp) }
    // 所有子项总宽度
    var totalContentWidth by remember { mutableStateOf(0.dp) }

    // 动态计算水平内边距
    val horizontalPadding = if (totalContentWidth <= trackWidth) 0.dp else trackWidth / 2

    LazyRow(
        state = listState,
        modifier = modifier
            .fillMaxWidth()
            .height(56.dp) // 轨道高度可按需调整
            .onSizeChanged { trackWidth = with(density) { it.width.toDp() } },
        contentPadding = PaddingValues(horizontal = horizontalPadding),
        horizontalArrangement = Arrangement.spacedBy(8.dp) // 子项间距可按需调整
    ) {
        items(items) { item ->
            // 按widthFactor换算子项实际宽度，换算比例可根据业务调整
            val itemWidth = with(density) { (item.widthFactor * 36).dp }
            Box(
                modifier = Modifier
                    .width(itemWidth)
                    .fillMaxHeight()
                    .background(item.color, RoundedCornerShape(8.dp))
                    // 静态列表可直接累加计算总宽度，子项动态变化时建议遍历listState.layoutInfo计算
                    .onSizeChanged {
                        totalContentWidth += with(density) { it.width.toDp() }
                    }
            )
        }
    }
}

注意事项 #

• 如果子项列表会动态增删、修改宽度，不要用示例里onSizeChanged累加的方式计算总宽度，建议在LaunchedEffect中监听listState.layoutInfo，遍历所有已布局的子项信息累加宽度，避免累计误差
• 子项宽度的换算逻辑可根据业务调整，widthFactor如果是比例值就按屏幕/轨道宽度比例换算，如果是固定像素值直接转dp即可
• 该方案不需要手动处理任何滑动事件，LazyRow原生的惯性滚动、嵌套滚动、鼠标滚轮支持、无障碍焦点滚动等能力全部保留，不需要额外开发

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