Hacer coincidir el ancho del padre en la columna (Jetpack Compose)

Por defecto, Column {} tiene el ancho de su elemento hijo más grande. ¿Cómo puedo hacer que todos los demás elementos se ajusten al ancho del padre? Column? si uso Modifier.fillMaxWidth() los elementos ocuparán todo el espacio disponible y harán que el padre Column más grande ¿Cómo puedo lograr el mismo comportamiento como un Modifier.matchParentWidth() Modificador proporcionaría?

Puedes usar el modificador .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")
        }
    }

La solución es aprovechar el poder de medidas intrínsecas.

En lugar de usar Modifier.fillMaxWidth() usamos width(IntrinsicSize.Min) para hacer coincidir el ancho con el ancho mínimo del elemento más grande

Aquí estoy usando Modifier.fillMaxWidth y los elementos no hacen que la columna principal sea más grande:

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

}

Lo que suelo hacer para lograr el matchParentWidth es algo como esto (está sucio pero hace el trabajo):

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

simplemente puedes usar 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()}")

        }

usted está aplicandoModifier.width(300.dp) en la columna principal, el ancho máximo que puede ocupar un elemento secundario en esa columna es 300.dp.

Usando Modifier.fillMaxWidth() en tu Text componible en este contexto es sinónimo de usar Modifier.preferredWidth(300.dp) porque solo puede ser tan ancho como su componente principal.