Lo que sucede es que cualquier elemento que tenga texto de más de una línea, se expande

Para mantener una altura uniforme, debe establecer una altura mínima para cada Box secundario, para hacerlo, puede usar el Modifier como se muestra a continuación.

 //Adjust 200.dp as your requirement Box(modifier = Modifier.height(200.dp))

De esta forma, cada caja tendrá la misma altura independientemente de la longitud/tamaño del contenido.

Si le da una altura fija a sus Composables, puede terminar Composables que no muestren alguna parte de sus componibles secundarios, en su caso podría ser Componible de Text .

La primera y fácil manera es establecer una altura mínima Modifier.heightIn(min = 200.dp) , esto podría dejar espacio debajo o encima de su componible dependiendo de la alineación de su Caja, y si sus Componibles son más altos que 200.dp, tendrá el mismo efecto que tiene ahora, por lo que no es suficiente o agregar una altura fija no es suficiente.

La mejor manera es usar onTextLayout para obtener el recuento de líneas y la altura del texto para agregar un número menor de líneas como relleno como

 @Composable fun GridSnackCardWithTitle( modifier: Modifier = Modifier, snack: Snack, ) { Column( modifier = modifier .heightIn(min = 200.dp) .shadow(1.dp, shape = RoundedCornerShape(5.dp)) .background(Color.White), ) { val density = LocalDensity.current.density Image( contentScale = ContentScale.None, modifier = Modifier .fillMaxWidth() .aspectRatio(1f) .clip(RoundedCornerShape(8.dp)) .clickable { }, painter = rememberImagePainter( data = snack.imageUrl, builder = { placeholder(drawableResId = R.drawable.placeholder) } ), contentDescription = null ) Spacer(modifier = Modifier.height(4.dp)) var padding by remember { mutableStateOf(0.dp) } Text( modifier = Modifier.padding(start = 4.dp, end = 4.dp, bottom = padding), text = "Snack ${snack.name}", fontSize = 20.sp, onTextLayout = { val lineCount = it.lineCount val height = (it.size.height / density).dp println("lineCount: $lineCount, Height: $height") padding = if (lineCount > 1) 0.dp else height } ) } }

Resultado

Por lo general, este problema se resuelve agregando Modifier.fillMaxHeight a los elementos que lo contienen y Modifier.height(IntrinsicSize.Max) al contenedor.

El problema es que en este caso no tenemos acceso al Modifier de contenedor: en Compose 1.1. * hay una Row en el código fuente, pero no podemos pasarle nuestro modificador, y en 1.2. * no hay Row en absoluto.

Creo que tal solicitud es justa, pero por ahora puedes hacerlo tú mismo en LazyColumn :

 val columnsCount = 2 val itemsCount = 10 LazyColumn( modifier = Modifier.fillMaxSize() ) { items((itemsCount + 1) / columnsCount) { i -> Row(Modifier.height(IntrinsicSize.Max)) { for (j in 0 until columnsCount) { val index = i * columnsCount + j if (index < itemsCount) { Text( LoremIpsum(index).values.first(), modifier = Modifier .fillMaxHeight() .weight(1f) .background( when (index % 3) { 0 -> Color.LightGray 1 -> Color.DarkGray else -> Color.Gray } ) ) } else { Spacer(Modifier.weight(1f)) } } } } }