匹配列中父项的宽度 (Jetpack Compose)

Question

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

Answer 1

我在这里使用 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 2

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

在此上下文中，在 Text 可组合项上使用 Modifier.fillMaxWidth() 等同于使用 Modifier.preferredWidth(300.dp)，因为它的宽度只能与其父可组合项一样宽。

Answer 3

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

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

Answer 4

您可以使用修饰符.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 5

你可以简单地使用 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()}")

        }

匹配列中父项的宽度 (Jetpack Compose)

Match Width of Parent in Column (Jetpack Compose)

android

android-jetpack-compose