Jetpack Compose Box填满整个屏幕

Question

我是Android Jetpack Compose的新手。我正在创建一个Box，将modifier的高度和宽度设置为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))
    }
}

- William Tan

Answer 1

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

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

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

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

之前：

之后：

- Injent