Jetpack Compose LazyRow设置可见条目数量 如何实现1.5个条目显示效果

layoutInfo.visibleItemsInfo.size是只读计算属性，仅用来统计LazyRow布局完成后当前可见的条目数量，本身不是布局控制参数，所以直接修改这个属性无法实现需求，可使用以下两种成熟方案实现：

方案1：动态计算item宽度（最常用，可精准控制可见数量） #

核心逻辑是直接按目标可见条目数，给每个item设置等比例的宽度，不需要手动做布局测量，直接使用LazyList内置的fillParentMaxWidth扩展方法即可实现：

LazyRow(
    modifier = Modifier.fillMaxWidth()
) {
    items(yourDataList) { item ->
        Box(
            modifier = Modifier
                // 括号内的数值为单条item占LazyRow总宽度的比例，1/1.5f对应显示1.5个条目
                .fillParentMaxWidth(1 / 1.5f)
                .padding(end = 8.dp) // 可自定义条目间距
                .height(120.dp)
                .background(Color.LightGray)
        ) {
            // 此处放item的内部内容
        }
    }
}

如果给LazyRow设置了contentPadding的左右内边距，直接调整fillParentMaxWidth的比例即可适配，整体逻辑不需要修改。

方案2：固定item宽度适配（适合item尺寸固定的场景） #

如果设计要求item宽度固定，不需要随屏幕尺寸缩放，可以通过给LazyRow设置尾部内边距，露出下一个item的部分区域，达到显示1.X个条目的效果：

LazyRow(
    modifier = Modifier.fillMaxWidth(),
    // 尾部额外加padding用来露出下一个item的部分区域
    contentPadding = PaddingValues(horizontal = 16.dp, end = 80.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp) // 条目间距
) {
    items(yourDataList) { item ->
        Box(
            modifier = Modifier
                .width(240.dp) // 固定item宽度
                .height(120.dp)
                .background(Color.LightGray)
        ) {
            // 此处放item的内部内容
        }
    }
}

注意事项 #

• 不要尝试监听visibleItemsInfo的数值反向调整item尺寸，会触发多次不必要的重组，严重影响滑动性能
• 如果需要实现滚动对齐效果，比如每次滑动刚好划过一个完整item，可以配合LazyListState的animateScrollToItem方法自定义滑动逻辑。

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