Jetpack Compose 中的修饰符 fillMaxWidth() 和 wrapContentWidth()

Question

我对 Jetpack Compose 中的修饰符 fillMaxWidth() 和 wrapContentWidth() 的作用感到困惑。 我已经通读了文档并查看了它们的实现，但我仍然不确定它们是如何工作的（内部）。

以下是我对他们所做工作的理解：

• fillMaxWidth() 将元素的宽度设置为其父容器的最大宽度。 我的理解是，它通过将最小宽度和最大宽度设置为等于父级的最大宽度来实现。

• wrapContentWidth() 使布局元素与元素的内容一样宽。

我的问题是：

1. 在 fillMaxWidth() 的情况下，我对它在内部所做的事情的理解是否正确（将最小宽度和最大宽度设置为等于父级的最大宽度）？

2. 在 wrapContentWidth() 的情况下，是否通过将元素的最小和最大宽度设置为内容的宽度来使布局元素与元素的内容一样宽？

3. 另外，如果我将以下修饰符应用于元素，它究竟会做什么？ modifier = Modifier.fillMaxWidth().wrapContentWidth() 难道 wrapContentWidth()不会撤销 fillMaxWidth 所做的事情吗？ 如果我切换顺序并使用modifier = Modifier.wrapContentWidth().fillMaxWidth()怎么办？

感谢所有帮助。

Answer 1

• fillMaxWidth()将组合的最小和最大宽度设置为容器允许的最大值，以填充所有空间
• wrapContentWidth()会将最小宽度设置为 0（因此忽略之前的最小宽度），如果将 unbounded 设置为 true，则可以对最大宽度执行相同的操作

您可以将它们组合起来产生一些效果，例如，您可以使用fillMaxWidth来设置特定的背景颜色，然后使用wrapContentWidth和wrapContentHeight在同一容器中居中设置子可组合项，如此处所示（我使用wrapContentSize但同样适用于wrapContentWidth和wrapContentHeight ）

@Preview(widthDp = 360, heightDp = 360)
@Composable
private fun PreviewMOdifier() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Red)
            .wrapContentSize(Alignment.Center)
            .background(Color.Blue)
    ) {
        Text(
            text = "This is the body",
            modifier = Modifier
                .padding(all = 16.dp)
                .background(Color.Yellow)
        )
    }
}

编辑：这是另一个示例，尝试在Box修饰符中删除wrapContentHeight ，以便查看预览如何变化

@Preview(heightDp = 360)
@Composable
private fun PreviewThreeBlock() {
    PlaygroundTheme {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            Box(
                modifier = Modifier.wrapContentHeight().background(Color.Red)
            ) {
                Text(text = "FooBar")
            }
        }
    }
}

Answer 2

在 Jetpack Compose 中，子项或/和容器可组合项的大小设置是使用来自大小修改器、父项或滚动条的Constraints来完成的，因为它们返回 Constraints.Infinity。

测量具有父级或修改后的约束的可组合项确定子可组合项的大小

您可以查看此答案的约束部分。

Modifier.fillmaxWidth(fraction)将 Constraints 的最小和最大宽度设置为相等，因此当您调用 measurable.measure(constraints) 时，您的子 Composable 将使用此固定值进行测量。

当您的父可组合项是行、列或其他内置可组合项时，实际上大多数情况下不需要 Modifier.wrapWidth()，因为当您没有为可组合项分配大小修饰符时，它是根据最小-最大约束范围测量的parent 是介于 0 和父宽度之间的范围。

但是， Box有一个名为propagateMinConstraints或Surface的参数，它是一个Box with propagateMinConstraints = true强制最小Constraints到直接后代，如本答案或@Francesc 解释的那样。

@Composable
private fun WrapWidthExample() {
    Row() {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .border(2.dp, Color.Yellow),
            onClick = {}) {
            Column(
                modifier = Modifier
                    .size(50.dp)
                    .background(Color.Red, RoundedCornerShape(6.dp))
            ) {
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Green, RoundedCornerShape(6.dp))
                )

            }
        }
        Surface(
            modifier = Modifier
                .size(200.dp)
                .border(2.dp, Color.Yellow),
            onClick = {}) {
            Column(
                modifier = Modifier
                    .wrapContentWidth()
                    .background(Color.Red, RoundedCornerShape(6.dp))
            ) {
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Green, RoundedCornerShape(6.dp))
                )

            }
        }
    }
}

没有Modifier.wrapContentWidth() 200.dp（在我的设备中为 525px）被强制为红色 Column 以测量Measurable ，但是 wrapContentWidth 允许 Composable 使用它自己的最小约束，这是 0 因为没有分配任何修饰符。

• 允许内容以其所需的宽度进行测量，而不考虑传入的测量值 * [最小宽度约束][Constraints.minWidth]，并且，如果 [unbounded] 为真，也无需 *考虑传入的测量值 [最大宽度约束][约束.maxWidth]。 如果 * 内容的测量尺寸小于最小宽度约束，[对齐] * 它在最小宽度空间内。 如果内容的测量大小大于最大 * 宽度约束（仅当 [unbounded] 为真时才可能），[对齐] 在最大 * 宽度空间上。

从这个修改器返回的约束是

    val wrappedConstraints = Constraints(
        minWidth = if (direction != Direction.Vertical) 0 else constraints.minWidth,
        minHeight = if (direction != Direction.Horizontal) 0 else constraints.minHeight,
        maxWidth = if (direction != Direction.Vertical && unbounded) {
            Constraints.Infinity
        } else {
            constraints.maxWidth
        },
        maxHeight = if (direction != Direction.Horizontal && unbounded) {
            Constraints.Infinity
        } else {
            constraints.maxHeight
        }
    )

基本上，当父强制子可组合项使用其约束时，可以使用 wrapContentX，这可以在您构建自定义布局时完成，例如或使用上面的 Surface。

3. 在 Jetpack Compose 中，除非您链接 Modifier.requiredX，否则将应用第一个大小修饰符，而在它之后的修饰符将被忽略，除非它们之间没有填充、大小等。 您可以在第一个链接中查看 requiredSize 答案以获取更多详细信息。