AndroidJetpackCompose宽度/高度/大小修饰符vsrequiredWidth/requiredHeight/requiredSize

不同的是，普通的像改性宽度（）考虑到布局约束而需要像改性剂requiredWidth（）忽略它们。您可以将约束视为测量元素的最小/最大宽度/高度。为了更好地理解布局修饰符和约束是如何工作的，请查看这篇文章。

让我们看一个宽度修饰符的例子，高度和大小的行为方式相同。

@Composable
fun WidthModifierExample() {
    val columnWidth = 200.dp

    Column(
        modifier = Modifier
            .width(columnWidth)
            .border(1.dp, Color.Gray)
    ) {
        Text(
            text = "requiredWidth = parent - 50",
            modifier = Modifier
                .requiredWidth(columnWidth - 50.dp)
                .background(Color.LightGray)
        )
        Text(
            text = "requiredWidth = parent + 50",
            modifier = Modifier
                .requiredWidth(columnWidth + 50.dp)
                .background(Color.LightGray)
        )
        Text(
            text = "width = parent - 50",
            modifier = Modifier
                .width(columnWidth - 50.dp)
                .background(Color.LightGray),
        )
        Text(
            text = "width = parent + 50",
            modifier = Modifier
                .width(columnWidth + 50.dp)
                .background(Color.LightGray)
        )
    }
}

深灰色边框为列边界，文本背景为浅灰色。Modifier.width(200.dp)应用于列，因此它接收minWidth = 200dp; maxWidth = 200dp约束。该列所以每个孩子得到的布局并不限制其孩子最小宽度minWidth = 0; maxWidth = 200dp的限制。前两个文本使用requiredWidth()修饰符忽略此约束，因此第二个文本比父列宽。最后一个文本宽度200dp根据maxWidth = 200dp约束减小，因为它使用width()修饰符代替。

在上面的示例中，仅限制了文本的最大宽度。让我们看另一个示例，其中最小宽度也受到限制：

@Composable
fun WidthModifierExample() {
    Column(
        modifier = Modifier.border(1.dp, Color.Gray)
    ) {
        val minWidth = 140
        val maxWidth = 200
        val widthDescriptions = arrayOf(
            WidthDescription(minWidth - 50, "min - 50"),
            WidthDescription((minWidth + maxWidth) / 2, "between min and max"),
            WidthDescription(maxWidth + 50, "max + 50")
        )

        for (widthDescription in widthDescriptions) {
            Text(
                text = "requiredWidth = ${widthDescription.description}",
                modifier = Modifier
                    .border(.5.dp, Color.Red)
                    .widthIn(minWidth.dp, maxWidth.dp)
                    .background(Color.LightGray)
                    .requiredWidth(widthDescription.width.dp)
            )
        }

        for (widthDescription in widthDescriptions) {
            Text(
                text = "width = ${widthDescription.description}",
                modifier = Modifier
                    .border(.5.dp, Color.Red)
                    .widthIn(minWidth.dp, maxWidth.dp)
                    .background(Color.LightGray)
                    .width(widthDescription.width.dp)
            )
        }
    }
}

data class WidthDescription(
    val width: Int,
    val description: String
)

在这种情况下，Column()不添加任何约束，但每个子项Text()都包含在widthIn()修饰符中，该修饰符添加了自己的约束。浅灰色背景显示文本大小，而红色边框显示结果元素的尺寸。如您所见requiredWidth()，前三个文本的修饰符忽略了外部约束，因此元素宽度及其子元素Text()宽度可能不同。最后三个文本使用width()修饰符，它考虑了约束，因此Text()宽度始终与结果元素匹配。