Jetpack Compose：如何在自定义布局的MeasurePolicy中绘制额外内容

我实现了一个类似Column的自定义布局MyCustomLayout，可以垂直堆叠子组件，代码如下：

MyCustomLayout(
    modifier = modifier,
    items = {
        Component1()
        Component2()
        Component3()
        Component4()
        }
    },
)

@Composable
private fun MyCustomLayout(
    modifier: Modifier = Modifier,
    items: @Composable () -> Unit,
) {
    Layout(
        modifier = modifier,
        contents = listOf(items),
    ) { itemsMeasurable, constraints ->
        if (itemsMeasurable.isEmpty()) {
            layout(0, 0) {}
        } else {
            // 测量子项
            val itemsPlaceable = itemsMeasurable.map {
                it.measure(constraints)
            }
            // 布局宽度取子项最大宽度
            val layoutWidth = itemsPlaceable.maxOf { it.width }
            // 布局高度为所有子项高度之和
            val layoutHeight = itemsPlaceable.sumOf { it.height }

            // 创建布局容器
            layout(layoutWidth, layoutHeight) {
                // 垂直放置子项
                var yPosition = 0
                itemsPlaceable.forEach { placeable ->
                    placeable.placeRelative(0, yPosition)
                    yPosition += placeable.height
                }
            }
        }
    }
}

目前我需要在每个子项后添加Divider，现在只能手动在子组件之间插入：

MyCustomLayout(
    modifier = modifier,
    items = {
        Component1()
        Divider()
        Component2()
        Divider()
        Component3()
        Divider()
        Component4()
        }
    },
)

这种方式不够优雅，我希望让自定义布局自动处理分隔符。尝试在MeasurePolicy的布局逻辑里直接调用Divider()，但因为不在Composable上下文里失败了：

itemsPlaceable.forEach { placeable ->
    placeable.placeRelative(0, yPosition)
    Divider()
    yPosition += placeable.height + DividerHeight
}

核心结论 #

不能在MeasurePolicy的layout代码块中直接调用@Composable函数。这个代码块属于布局的测量/放置阶段，运行时没有Composable上下文，无法触发Composable的组合过程。

要让自定义布局自动添加分隔符，正确的做法是在Composable组合阶段就把分隔符纳入布局的内容列表，再在测量/放置阶段统一处理。

修改后的实现 #

我们可以调整MyCustomLayout的参数，让它接收多个独立的子项，然后内部自动在子项之间插入分隔符：

@Composable
private fun MyCustomLayout(
    modifier: Modifier = Modifier,
    // 允许自定义分隔符样式
    divider: @Composable () -> Unit = { Divider() },
    vararg items: @Composable () -> Unit,
) {
    // 将子项和分隔符组合成内容列表（最后一个子项后不加分隔符）
    val combinedContents = items.flatMapIndexed { index, item ->
        if (index == items.lastIndex) listOf(item)
        else listOf(item, divider)
    }

    Layout(
        modifier = modifier,
        contents = combinedContents
    ) { itemsMeasurable, constraints ->
        // 测量所有内容（子项+分隔符）
        val placeables = itemsMeasurable.map { it.measure(constraints) }
        
        // 计算布局整体尺寸
        val layoutWidth = placeables.maxOf { it.width }
        val layoutHeight = placeables.sumOf { it.height }
        
        // 放置所有内容
        layout(layoutWidth, layoutHeight) {
            var yPos = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(0, yPos)
                yPos += placeable.height
            }
        }
    }
}

使用方式 #

现在使用时只需传入子组件，分隔符会自动添加：

MyCustomLayout(modifier = modifier) {
    Component1()
    Component2()
    Component3()
    Component4()
}

补充说明 #

如果需要保留原有的items参数形式（接收一个@Composable块），可以通过SubcomposeLayout来实现更灵活的子项拆分，但对于这个场景，直接接收多个子项的方式更简洁直观。

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