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

Question

我在 Jetpack Compose 中创建一个组件，我意识到当我在 Box 中创建一个 Composable 时，这个组件可能假设有 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() 设置为 Column 或 Row？

Answer 1

来自官方文档

Modifier.fillMaxSize modifier, which makes an element occupy all available space, will take part in defining the size of the Box.

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

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

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

您不能在 Row 或 Column 中使用 .matchParentSize()，因为此修饰符是 BoxScope 接口(interface)的一部分。所以它只适用于 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 会使它变得困惑。