Jetpack Compose：实现可横向滚动LazyColumn的子项宽度适配

要实现这种「自适应宽度的垂直懒加载列表」，核心是让LazyColumn的宽度动态取父容器可用宽度和已加载子项的最大固有宽度中的较大值，同时保持懒加载特性。具体实现如下：

@Composable
fun AdaptiveWidthLazyColumn() {
    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        val parentMaxWidth = maxWidth
        val density = LocalDensity.current
        var maxItemWidth by remember { mutableStateOf(0.dp) }

        LazyColumn(
            modifier = Modifier
                .width(max(parentMaxWidth, maxItemWidth))
                .horizontalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            repeat(20) { index ->
                item {
                    Text(
                        text = "$index ${if (index == 5) "..............................................." else ""}",
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(Color.Gray.copy(alpha = 0.2f))
                            .padding(8.dp)
                            .onGloballyPositioned { coordinates ->
                                with(density) {
                                    val currentItemWidth = coordinates.size.width.toDp()
                                    if (currentItemWidth > maxItemWidth) {
                                        maxItemWidth = currentItemWidth
                                    }
                                }
                            }
                    )
                }
            }
        }
    }
}

关键逻辑说明 #

1. BoxWithConstraints获取父容器宽度：通过这个组件可以直接拿到父布局的可用最大宽度maxWidth，无需手动监听尺寸变化。
2. 动态跟踪子项最大宽度：用remember保存maxItemWidth状态，通过子项的onGloballyPositioned回调测量自身宽度，一旦发现当前子项宽度大于已记录的最大值，就更新状态。
3. LazyColumn宽度自适应：将LazyColumn的宽度设置为max(parentMaxWidth, maxItemWidth)：
   • 当所有已加载子项的最大宽度 ≤ 父容器宽度时，LazyColumn占满父宽度，子项通过fillMaxWidth()自动占满横向空间。
   • 当存在子项宽度超过父容器宽度时，LazyColumn会扩展到该最大宽度，此时子项依然通过fillMaxWidth()占满LazyColumn宽度，同时允许横向滚动查看超出部分。
4. 懒加载特性保留：仅当子项进入可见区域时才会触发测量和布局，不会提前加载所有子项，避免性能损耗。

注意事项 #

• 由于懒加载的特性，maxItemWidth会随着滚动加载新子项而动态更新，若后续出现更宽的子项，LazyColumn的宽度会自动调整，这是符合懒加载逻辑的合理行为。
• 确保在onGloballyPositioned中使用LocalDensity将像素单位转换为dp，避免不同屏幕密度下的尺寸偏差。

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