android - Jetpack Compose 中 Box 内的组件中的 `fillMaxSize()` 和 `matchParentSize()` 有什么区别？

Question

我在 Jetpack Compose 中创建了一个组件，并意识到当我在 a 内部制作一个 Composable 时Box，这个组件可能会假设 2 个最大填充可能性：Modifier.fillMaxSize()和Modifier.matchParentSize(). 如下所示：

Box(
    modifier = modifier // This modifier is received by parameter of another composable function
) {
    Canvas(modifier = Modifier.matchParentSize()) {
        // Using match parent size
    }
}

和

Box(
    modifier = modifier // This modifier is received by parameter of another composable function
) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        // Using fill max size
    }
}

这两种模式之间的实际区别是什么？为什么我不能设置Modifier.matchParentSize()为 aColumn或 a Row？

标签： androidandroid-jetpack-compose

Answer 1

来自官方文档

Modifier.fillMaxSize使元素占据所有可用空间的修饰符将参与定义 Box 的大小。

所以它指定了元素的大小。

但是，如果您Modifier.matchParentSize()在框内的元素中使用它与指定框的大小无关。

盒子的大小将由盒子的其他子元素测量。然后带有 的元素Modifier.matchParentSize()将匹配并占据该大小。

您不能.matchParentSize()在 Row 或 Column 中使用，因为此修饰符是 BoxScope 接口的一部分。所以它只适用于boxscope。

例如，如果您将 fillMaxSize 与以下内容一起使用。

Box() {
    Text(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        text = ""
    )

    Text(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue),
        text = "Hello",
    )
}

你会得到这个。.fillMaxSize()由于第一个孩子中的修饰符，它将填满整个屏幕。

但是如果你使用这个

Box() {
    Text(
        modifier = Modifier
            .matchParentSize()
            .background(Green),
        text = ""
    )

    Text(
        modifier = Modifier
            .size(100.dp),
        text = "Hello",
    )
}

Hello 文本只需要 100.dp，然后绿色背景将填充 100.dp，因为 .matchParentSize()第一个子元素中的修饰符。

我本可以使用 Box 而不是 Text，但更多的 Box 会让人感到困惑。