Jetpack Compose中weight修饰符致可组合项消失的问题求助

我查过相关问题但没完全搞懂原因，没用到requiredHeight修饰符，但遇到类似问题：不给元素加weight时文本显示正常，加上后文本直接消失。

我的场景是Card放在LazyHorizontalStaggeredGrid里，Card高度由容器决定。现在想实现折叠展开的文本元素宽度是第一个列元素的3倍，但用weight就出问题，求解决办法。

出现问题的代码（带weight） #

@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后文本消失，布局异常。

移除weight后的代码片段（正常显示但比例不对） #

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

效果：文本正常显示，但无法实现1:3的宽度比例。

解决办法 #

问题根源是Row和LazyHorizontalStaggeredGrid的布局逻辑冲突：weight需要父布局有确定的可用宽度，但LazyHorizontalStaggeredGrid的子项默认是包裹内容宽度，导致weight计算时没有可用空间，文本被挤压消失。

方案1：给Row添加fillMaxWidth()（推荐） #

让Row占满父容器的宽度，这样weight就能正确计算比例：

Row(
    modifier = Modifier
        .animateContentSize()
        .fillMaxWidth(), // 新增该行
    verticalAlignment = Alignment.CenterVertically,
) {
    // 原有代码保持不变
}

这个方案最灵活，不用固定数值，能适配不同屏幕尺寸。

方案2：固定宽度实现比例 #

如果不想让Row占满宽度，可以直接给元素设置固定宽度来实现1:3比例：

Row(
    modifier = Modifier
        .animateContentSize(),
    verticalAlignment = Alignment.CenterVertically,
) {
    Column(
        modifier = Modifier
            .padding(12.dp)
            .width(32.dp), // 固定第一个列的宽度
    ) {
        // 原有文本代码
    }
    if (expanded) Text(
        stringResource(toilet.textRes),
        modifier = Modifier
            .padding(12.dp)
            .width(96.dp), // 设置为第一个列的3倍宽度
        style = MaterialTheme.typography.bodyMedium,
        textAlign = TextAlign.Justify,
    )
    // 图片代码保持不变
}

内容的提问来源于stack exchange，提问作者askSoap