Jetpack Compose Box 填满整个屏幕

Question

我是学习 Android Jetpack Compose 的新手。我当前正在创建一个 Box，将修改器高度和宽度设置为 100 dp，但是当我将 Box 放在 Column 之外时，它会填充整个布局，而不是保持 100 x 100dp 的大小。

这是代码：

@Composable
fun MainContent() {
    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))
    }
}

Answer 1

如果您的 Composable 的父级是 Surface ，它将尝试用它找到的第一个 Composable 填充整个空间。所以你的代码可能如下所示：

Surface(
    modifier = Modifier.fillMaxSize()
) {
    MainContent()
}

要消除此行为，您需要将 Composable 包装在Box中：

Surface(
    modifier = Modifier.fillMaxSize()
) {
    Box {
        MainContent()
    }
}

前：

后：