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

Question

默认情况下，Column {}具有其最大子元素的宽度。如何使所有其他元素适合父元素的宽度Column？如果我使用Modifier.fillMaxWidth()这些元素将占用整个可用空间并使父元素Column变大。我怎样才能实现与Modifier.matchParentWidth()Modifier 提供的相同的行为？

Answer 1

随着1.0.x你可以使用修饰符.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")
        }
    }

Answer 2

解决方案是利用内在测量的力量。

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

Answer 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))
}

Answer 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()}")

        }