匹配列中父项的宽度（Jetpack Compose）答案

【问题标题】：Match Width of Parent in Column (Jetpack Compose)匹配列中父项的宽度（Jetpack Compose）
【发布时间】：2021-01-28 17:58:43
【问题描述】：

默认情况下，Column {} 具有其最大子元素的宽度。如何使所有其他元素适合父 Column 的宽度？如果我使用Modifier.fillMaxWidth()，元素将占用整个可用空间并使父Column 更大。如何实现与 Modifier.matchParentWidth() 修饰符一样的行为？

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

您可以使用修饰符.width(IntrinsicSize.Max)

 Column(Modifier.width(IntrinsicSize.Max)) {
        Box(Modifier.fillMaxWidth().background(Color.Gray)) {
            Text("Short text")
        }
        Box(Modifier.fillMaxWidth().background(Color.Yellow)) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth().background(Color.Green)) {
            Text("Medium length text")
        }
    }

【讨论】：

知道何时使用 .Min 与 .Max 吗？接受的答案使用 .Min 而你的答案是 .Max。

【解决方案2】：

解决方案是利用intrinsic measurements 的力量。

我们不使用Modifier.fillMaxWidth()，而是使用height(IntrinsicSize.Min)来匹配最大元素的最小宽度

【讨论】：

不应该是width(InstrinsicSize.Min，因为我们在谈论宽度？

【解决方案3】：

这里我使用Modifier.fillMaxWidth 并且项目不会使父列变大：

@Composable
fun Demo() {
Column(modifier = Modifier.width(300
    .dp)) {
    Text(text = "with fillMaxWidth modifier",modifier = Modifier.fillMaxWidth().background(Color.Red))
    Text(text = "without fillMaxWidth modifier",modifier = Modifier.background(Color.Gray))
 }

}

我通常为实现matchParentWidth 所做的事情是这样的（它很脏但可以完成工作）：

val context = AmbientContext.current.resources
val displayMetrics = context.displayMetrics
val scrWidth = displayMetrics.widthPixels / displayMetrics.density

Column(modifier = Modifier.width(300
    .dp)) {
    Text(text = "with fillMaxWidth modifier",modifier = Modifier.fillMaxWidth().background(Color.Red))
    Text(text = "without fillMaxWidth modifier",modifier = Modifier
        .preferredWidth(scrWidth.dp)
        .background(Color.Gray))
}

【讨论】：

你好，我在这里寻找动态尺寸。我无法为父列指定固定大小。该列应与其最宽的子列一样宽
如果您想要像素完美的比例几何，这是最好的解决方案。谢谢。我错过了密度划分！非常感谢。
我也用它实现了：gist.github.com/cicerohellmann/20f276f04a694e7bb588d84162169a73

【解决方案4】：

你可以简单地使用fillMaxWidth()

 Row(modifier = Modifier
        .fillMaxWidth()
        .background(Color.Cyan),) {
        Spacer(modifier = Modifier.padding(start = 4.dp))
        Image(
            painter = painterResource(R.drawable.tom_jerry),
            contentDescription ="this is image",

            modifier = Modifier
                .size(40.dp)
                .clip(shape = CircleShape).align(CenterVertically),
            alignment = Alignment.Center,
            contentScale = ContentScale.FillHeight


        )
        Column(modifier = Modifier.padding(start = 10.dp)) {
            Text(text = "Name : ${msg.name}")
            Text(text = "age : ${msg.age.toString()}")

        }

【讨论】：

【解决方案5】：

您将Modifier.width(300.dp) 应用到父列，该列中的子项可以占用的最大宽度为300.dp。

在这种情况下，在您的 Text 可组合对象上使用 Modifier.fillMaxWidth() 与使用 Modifier.preferredWidth(300.dp) 同义，因为它的宽度只能与父可组合对象一样宽。

【讨论】：

你好，我在这里寻找动态尺寸。我无法为父列指定固定大小。该列应与其最宽的子列一样宽