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？

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 会让它变得混乱。