Jetpack Compose自定义布局测量逻辑与尺寸控制疑问

我正在尝试制作自定义布局以理解其工作原理，以及如何放置和测量子Composable。遇到以下问题：

1. 当为自定义Composable设置尺寸后，在Layout的measure scope中测量子元素时，子元素被强制设置为父元素的最大宽高：

@Composable
fun CustomComposable(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Layout(
        modifier = modifier,
        content = content,
        measurePolicy = { measurables, constraints ->
            val placeables = measurables.map {
                it.measure(constraints)
            }

            layout(constraints.maxWidth, constraints.maxHeight) {
                var y = 0
                placeables.forEach {
                    it.place(0, y)
                    y += (it.height)
                }
            }
        },
    )
}

使用方式：

CustomComposable(
    modifier = Modifier
        .size(200.dp)
        .background(color = Color.Red)
) {
    Text(text = "Text 1", modifier = Modifier.size(20.dp))
    Text(text = "Text 2", modifier = Modifier.size(20.dp))
}

2. 当不为父元素设置尺寸时，子元素会按自身所需尺寸布局，但父元素会占满全屏：

CustomComposable(
    modifier = Modifier.background(color = Color.Red)
) {
    Text(text = "Text 1")
    Text(text = "Text 2")
}

我希望理解该行为的原因，以及如何实现父元素遵守约束，同时子元素的尺寸既能被尊重（如设置固定尺寸时），也能按需占用空间（未设置时），类似Column的表现：

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Red)
) {
    Text(text = "this is 1", modifier = Modifier.size(20.dp))
    Text(text = "this is 2")
}

并希望了解如何实现两种布局效果：左图为Column设置fillMaxWidth且子元素有自身尺寸；右图为Column未设置尺寸但子元素有自身尺寸。

最后一个问题：若为CustomComposable设置尺寸后，在layout(newWidth, newHeight) {}中修改宽高，布局的尺寸是否会改变？如果不会，手动计算尺寸是否有意义？

1. 现有行为的原因 #

• 父设置固定尺寸时：此时父布局的constraints是minWidth=maxWidth=200.dp、minHeight=maxHeight=200.dp（固定约束）。你直接将该约束传递给子元素测量，子元素的size(20.dp)会被父的强制约束覆盖，只能按200.dp尺寸渲染。
• 父未设置尺寸时：父布局的constraints是minWidth=0、maxWidth=屏幕宽度，minHeight=0、maxHeight=屏幕高度（宽松约束）。子元素测量时会使用自身所需尺寸，但你在layout()中直接用了constraints.maxWidth和constraints.maxHeight，导致父布局强制占满全屏。

2. 实现类似Column的布局逻辑 #

要让父布局遵守约束，同时尊重子元素的尺寸，需要调整测量逻辑：给子元素传递合适的约束，再根据子元素尺寸和父约束计算布局自身大小。修改后的代码如下：

@Composable
fun CustomComposable(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Layout(
        modifier = modifier,
        content = content,
        measurePolicy = { measurables, constraints ->
            // 给子元素传递约束：宽度遵循父的约束，高度不受限制（让子元素自主决定高度）
            val childConstraints = constraints.copy(minHeight = 0, maxHeight = Constraints.Infinity)
            val placeables = measurables.map { it.measure(childConstraints) }

            // 计算布局自身宽度：优先遵循父的固定约束，否则取子元素最大宽度，同时确保在父约束范围内
            val layoutWidth = if (constraints.hasFixedWidth) {
                constraints.maxWidth
            } else {
                placeables.maxOfOrNull { it.width } ?: 0
            }.coerceIn(constraints.minWidth, constraints.maxWidth)

            // 计算布局自身高度：优先遵循父的固定约束，否则取子元素高度之和，同时确保在父约束范围内
            val layoutHeight = if (constraints.hasFixedHeight) {
                constraints.maxHeight
            } else {
                placeables.sumOf { it.height }
            }.coerceIn(constraints.minHeight, constraints.maxHeight)

            layout(layoutWidth, layoutHeight) {
                var yOffset = 0
                placeables.forEach { placeable ->
                    placeable.placeRelative(x = 0, y = yOffset)
                    yOffset += placeable.height
                }
            }
        }
    )
}

逻辑说明 #

• 子元素约束：childConstraints解除了高度的强制限制，让子元素的size()修饰符可以生效；宽度则继承父的约束，保持类似Column的横向布局逻辑。
• 布局自身尺寸：先判断父约束是否固定（如设置了size()或fillMaxSize()），如果是则直接使用父约束的尺寸；否则自适应子元素的尺寸，同时确保不超出父的最小/最大约束范围。

3. 实现两种目标布局效果 #

左图：父布局fillMaxWidth，子元素保留自身尺寸 #

给CustomComposable添加fillMaxWidth()修饰符，子元素设置固定尺寸：

CustomComposable(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Red)
) {
    Text(text = "Text 1", modifier = Modifier.size(20.dp).background(Color.Blue))
    Text(text = "Text 2", modifier = Modifier.size(30.dp).background(Color.Green))
}

此时父布局宽度占满屏幕，高度为子元素高度之和，子元素按自身设置的尺寸渲染。

右图：父布局不设置固定尺寸，子元素保留自身尺寸 #

直接使用CustomComposable，不添加固定尺寸或填充修饰符：

CustomComposable(
    modifier = Modifier.background(Color.Red)
) {
    Text(text = "Text 1", modifier = Modifier.size(20.dp).background(Color.Blue))
    Text(text = "Text 2", modifier = Modifier.size(30.dp).background(Color.Green))
}

此时父布局宽度取子元素中的最大宽度，高度为子元素高度之和，完全包裹子元素。

4. layout()中修改宽高的问题 #

• 尺寸是否改变：如果给CustomComposable设置了固定尺寸（如size(200.dp)），父组件传递的constraints是固定值（min=max=200.dp），此时在layout()中传入其他宽高不会改变布局的实际尺寸——Compose布局系统会强制让布局遵守父的约束，最终尺寸还是200.dp。
• 手动计算尺寸的意义：
  • 当父约束宽松（未设置固定尺寸）时，layout()中传入的计算尺寸会生效，决定布局的最终大小。
  • 即使父有固定约束，手动计算子元素尺寸可以帮助你正确排列子元素（比如在固定大小的容器内实现居中、换行、滚动等逻辑）。

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