如何让LazyColumns合理分配可用空间而不被挤出屏幕？

问题场景 #

我需要实现一种布局，同时具备ColumnSpec.weight和wrap_content的特性：当内容能适配可用空间时，以wrap_content方式展示；空间不足时，则按权重分配空间。

测试布局代码如下：

Box(modifier = Modifier.size(800.dp, 300.dp)) {
    Column(modifier=Modifier.fillMaxSize()) {
        Text("HEADER")
        LazyColumn {
            items(15) {
                Text("item", modifier=Modifier.padding(start=20.dp))
            }
        }

        Text("HEADER")
        LazyColumn {
            items(3) {
                Text("item", modifier=Modifier.padding(start=20.dp))
            }
        }
    }
}

这是两个带标题的列表，默认布局下第一个过长的列表会把第二个完全挤出屏幕。

期望布局行为 #

• 若两个列表都较短能适配屏幕，按默认顶部对齐方式展示；
• 若一个列表过长，短列表占用所需空间，长列表占用剩余空间并可滚动；
• 若两个列表都过长，平均分配空间且均可滚动。

我尝试过ConstraintLayout，但仍会出现列表被挤出屏幕的问题；使用ColumnSpec.weight虽能保留所有内容，但短列表会占用多余空间显示空白；设置fill=false后，短列表的未填充空间无法被长列表利用，仍存在空白。请问这种布局需求是否可实现？

这种需求完全可以实现，核心是通过**自定义SubcomposeLayout**动态测量子项的理想尺寸，再根据可用空间分配布局。以下是具体实现方案：

自定义布局组件 #

@Composable
fun AdaptiveColumn(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable () -> Unit
) {
    SubcomposeLayout(modifier) { constraints ->
        val contentConstraints = constraints.copy(minHeight = 0)
        // 预组合所有子项，获取每个子项的理想高度
        val placeables = subcompose(AdaptiveColumnContent, content).map {
            it.measure(contentConstraints)
        }

        val totalIdealHeight = placeables.sumOf { it.height }
        val availableHeight = constraints.maxHeight

        val layoutHeight = maxOf(totalIdealHeight, constraints.minHeight)
        val layoutWidth = constraints.maxWidth

        // 计算每个子项的实际高度
        val heights = if (totalIdealHeight <= availableHeight) {
            // 空间充足，按wrap_content分配高度
            placeables.map { it.height }
        } else {
            // 空间不足，拆分固定高度组件（标题）与可滚动组件
            val fixedHeights = mutableListOf<Int>()
            val scrollableIndices = mutableListOf<Int>()

            placeables.forEachIndexed { index, _ ->
                // 按布局结构判断：奇数位为标题，偶数位为可滚动列表，可根据实际结构调整
                if (index % 2 == 0) {
                    fixedHeights.add(placeables[index].height)
                } else {
                    scrollableIndices.add(index)
                }
            }

            val totalFixedHeight = fixedHeights.sum()
            val remainingHeight = availableHeight - totalFixedHeight
            val scrollableHeight = if (scrollableIndices.isNotEmpty()) remainingHeight / scrollableIndices.size else 0

            // 构建每个子项的最终高度数组
            placeables.mapIndexed { index, _ ->
                if (index % 2 == 0) fixedHeights[index / 2] else scrollableHeight
            }
        }

        // 执行布局
        layout(layoutWidth, layoutHeight) {
            var yOffset = 0
            placeables.forEachIndexed { index, placeable ->
                val xOffset = when (horizontalAlignment) {
                    Alignment.Start -> 0
                    Alignment.CenterHorizontally -> (layoutWidth - placeable.width) / 2
                    Alignment.End -> layoutWidth - placeable.width
                    else -> 0
                }
                placeable.placeRelative(xOffset, yOffset)
                yOffset += heights[index]
            }
        }
    }
}

private enum class AdaptiveColumnContent { Content }

改造测试布局 #

将原布局中的Column替换为自定义的AdaptiveColumn，并给每个LazyColumn添加Modifier.fillMaxHeight()以确保其在分配空间内可滚动：

Box(modifier = Modifier.size(800.dp, 300.dp)) {
    AdaptiveColumn(modifier = Modifier.fillMaxSize()) {
        Text("HEADER")
        LazyColumn(modifier = Modifier.fillMaxHeight()) {
            items(15) {
                Text("item", modifier = Modifier.padding(start = 20.dp))
            }
        }

        Text("HEADER")
        LazyColumn(modifier = Modifier.fillMaxHeight()) {
            items(3) {
                Text("item", modifier = Modifier.padding(start = 20.dp))
            }
        }
    }
}

逻辑说明 #

1. 预测量阶段：通过subcompose获取所有子项的理想高度，判断总高度是否超出可用空间；
2. 空间充足时：直接按子项理想高度布局，实现wrap_content的顶部对齐效果；
3. 空间不足时：先计算所有固定高度组件（如标题）的总高度，剩余空间平均分配给可滚动列表，确保每个列表都有展示空间且支持滚动；
4. 若布局结构更复杂，可调整scrollableIndices的判断逻辑，适配不同类型的子项。

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