Jetpack Compose中约束偏移与布局尺寸行为相反的原因解析

场景复现 #

顶层Compose代码，将一个Box居中显示：

@Composable
fun Greeting() {
    Column(
        horizontalAlignment = CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        val size = 240.dp
        Box(
            modifier = Modifier
                .width(size)
                .height(size)
                .border(1.dp, Color.Red)

        ) {
            BoxLayout(size, Color.Green) {
                BoxLayout(size, Color.Blue)
            }
        }
    }
}

实现1：偏移约束 #

当BoxLayout对约束进行1/3尺寸偏移时：

@Composable
private fun BoxLayout(
    size: Dp,
    borderColor: Color,
    content: @Composable BoxScope.() -> Unit = {}) {
    Box(modifier = Modifier
        .width(size)
        .height(size)
        .layout { measurable, constraints ->
            val placeable = measurable.measure(
                constraints.offset(
                    -size.roundToPx() / 3,
                    -size.roundToPx() / 3
                )
            )
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        }
        .border(1.dp, borderColor), content = content)
}

现象：盒子的宽高被缩小了1/3，而非偏移位置。

实现2：修改layout宽高 #

当BoxLayout直接将layout宽高减少1/3尺寸时：

@Composable
private fun BoxLayout(
    size: Dp,
    borderColor: Color,
    content: @Composable BoxScope.() -> Unit = {}
) {
    Box(modifier = Modifier
        .width(size)
        .height(size)
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            layout(
                placeable.width - size.roundToPx() / 3,
                placeable.height - size.roundToPx() / 3
            ) {
                placeable.place(0, 0)
            }
        }
        .border(1.dp, borderColor), content = content)
}

现象：盒子位置偏移了1/3尺寸，而非缩小宽高。

问题解答 #

1. 为何修改Layout的宽高并未改变盒子的宽高？ #

你修改的是当前布局节点自身的占位尺寸，而非子元素的实际尺寸。layout(width, height)定义的是这个BoxLayout节点告诉父节点自己占据的空间大小，但子元素已经通过measure(constraints)按照原始约束（240dp）完成测量，生成了固定大小的Placeable。

当你把自身布局尺寸缩小1/3后，父节点只会给这个BoxLayout分配缩小后的空间，但子Placeable还是原来的大小，且你调用placeable.place(0,0)让它在左上角放置，这就导致子元素超出了当前布局节点的范围——视觉上看起来像是子元素向右下方偏移，本质是父节点的边框按缩小后的尺寸绘制，子元素和布局节点左上角对齐但尺寸更大，所以边框显得偏移了。

简单说：改的是布局节点的“占位大小”，不是子元素的实际大小，子元素已经按原尺寸测量完成，所以视觉上是边框偏移而非子元素缩小。

2. 为何修改约束偏移却改变了盒子的宽高？ #

constraints.offset(dx, dy)的作用是缩小子元素的可用约束范围。原始约束是父节点传递过来的（比如240dp的宽高），调用offset(-size/3, -size/3)后，约束的最大宽高会被减少1/3（负数偏移相当于降低约束上限）。

子元素（内部的Box）在测量时会受新约束限制，只能按缩小后的最大尺寸生成Placeable，所以最终显示的尺寸就变成了原来的2/3。再加上你调用layout(placeable.width, placeable.height)让当前布局节点按子元素的大小占位，视觉上就表现为盒子宽高缩小了1/3。

本质上，约束是父节点给子元素的“尺寸限制”，修改约束直接影响子元素的测量结果，进而改变最终显示的尺寸。

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