Übereinstimmungsbreite des übergeordneten Elements in Spalte (Jetpack Compose)

Standardmäßig, Column {} hat die Breite des größten untergeordneten Elements. Wie kann ich alle anderen Elemente an die Breite des übergeordneten Elements anpassen? Column? Wenn ich benutze Modifier.fillMaxWidth() Die Elemente nehmen den gesamten verfügbaren Platz ein und bilden das übergeordnete Element Column größer. Wie kann ich das gleiche Verhalten erreichen wie a Modifier.matchParentWidth() Modifikator bereitstellen würde?

Sie können den Modifikator verwenden .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")
        }
    }

Die Lösung besteht darin, die Macht von zu nutzen intrinsische Messungen.

Anstatt zu verwenden Modifier.fillMaxWidth() wir gebrauchen width(IntrinsicSize.Min) um die Breite an die Mindestbreite des größten Elements anzupassen

Hier verwende ich Modifier.fillMaxWidth und die Elemente machen die übergeordnete Spalte nicht größer:

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

}

Was ich normalerweise tue, um das zu erreichen matchParentWidth ist so etwas (Es ist schmutzig, aber erledigt die Arbeit):

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

kannst du einfach verwenden 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()}")

        }

Sie bewerben sichModifier.width(300.dp) auf die übergeordnete Spalte, die maximale Breite, die ein untergeordnetes Element in dieser Spalte einnehmen kann 300.dp.

Verwenden Modifier.fillMaxWidth() auf Ihrem Text composable ist in diesem Zusammenhang gleichbedeutend mit verwenden Modifier.preferredWidth(300.dp) weil es nur so breit werden kann, wie es zusammensetzbar ist.