`weight`-modifier makes composable vanish

Question

I saw this, but I didn't quite understand what was wrong in the end, and since I don't use requiredHeight I don't know what to fix. But it's maybe the same issue: Without the weight-modifier set the text shows up, with it it vanishes:

@Composable
fun ToiletItem(indexedToilet: IndexedValue<Toilet>, modifier: Modifier = Modifier) {
    val toilet = indexedToilet.value
    var expanded by remember { mutableStateOf(false) }

    Card(modifier = modifier.clickable { expanded = !expanded }) {
        Row(
            modifier = Modifier.animateContentSize(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Column(
                modifier = Modifier
                    .padding(12.dp)
                    .weight(1f),
            ) {
                Text(
                    "${indexedToilet.index + 1}.",
                    style = MaterialTheme.typography.displaySmall,
                    textAlign = TextAlign.Center,
                )
                Text(
                    stringResource(R.string.toilet),
                    style = MaterialTheme.typography.labelMedium,
                    textAlign = TextAlign.Center,
                )
            }
            if (expanded) Text(
                stringResource(toilet.textRes),
                modifier = Modifier
                    .padding(12.dp)
                    .weight(3f),
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify,
            )
            Image(
                painterResource(toilet.imageRes),
                contentDescription = null,
                modifier = Modifier.fillMaxHeight(),
                contentScale = ContentScale.FillHeight,
                alignment = Alignment.CenterEnd,
            )
        }
    }
}

weight declared

Card(modifier = modifier.clickable { expanded = !expanded }) {
        Row(
            modifier = Modifier.animateContentSize(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Column(
                modifier = Modifier
                    .padding(12.dp)
                    //.weight(1f),
            ) {
...

weigth not declared

The height of the card is set by it's container LazyHorizontalStaggeredGrid.

Maybe setting weight isn't the right way at all because the container wraps around the content, so it doesn't need to distribute the space? But then, how am I going to have the second, collapsible, text element beeing n times as wide as the first?

Answer 1

I think you'll have to put a weight on the image as well; if not, the image overtakes the entire view, so the text won't show up