Jetpack Compose：设置固定宽高的独立Box为何占满全屏？

Compose的布局系统靠约束传递工作：你的MainContent作为根Composable时，它的父容器（比如Activity里的Surface）默认会传递「强制填充全部可用空间」的约束——也就是子元素的最小宽高等于最大宽高，必须填满屏幕。

你直接放在MainContent里的蓝色Box，收到的就是这种强制填充约束，哪怕你设置了width(100.dp)和height(100.dp)，也会被拉伸至占满整个布局。而Column内部的红、绿Box，Column给它们传递的约束是「允许子元素使用小于自身尺寸的大小」，所以固定宽高能正常生效。

给蓝色Box添加wrapContentSize()修饰符，让它忽略父容器的强制填充约束，仅包裹自身内容：

@Composable
fun MainContent() {
    Box(modifier = Modifier
        .wrapContentSize() // 新增：让Box仅包裹自身内容
        .width(100.dp)
        .height(100.dp)
        .background(Color.Blue))
    Column {
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Red))
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Green))
    }
}

或者，把蓝色Box放在一个默认wrapContentSize的外层Box里，同样能打破强制填充约束：

@Composable
fun MainContent() {
    Box { // 外层Box默认仅包裹内容
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Blue))
    }
    Column {
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Red))
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Green))
    }
}

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