Android Jetpack Compose 宽度/高度/大小修饰符 vs requiredWidth/requiredHeight/requiredSize

如何解决Android Jetpack Compose 宽度/高度/大小修饰符 vs requiredWidth/requiredHeight/requiredSize

Android Jetpack Compose 包含 width()、height() 和 size() 布局修饰符以及 requiredWidth()、requiredHeight() 和 requiredSize()。这两组修饰符有什么区别？我应该使用普通修饰符还是必需修饰符？

解决方法

区别在于像 width() 这样的 plain 修饰符会考虑布局 Constraints 而 required 像 requiredWidth() 这样的修饰符忽略它们。您可以将约束视为测量元素的最小/最大宽度/高度。要更好地了解布局修饰符和约束的工作原理，请查看 this post。

让我们看一个 width 修饰符的例子，height 和 size 的行为方式相同。

@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 约束。 Column 布局不限制其子项最小宽度，因此每个子项都获得 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}",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() 宽度始终与结果元素匹配。