LazyRow嵌套时子Composable的fillMaxWidth布局失效问题求助

问题原因 #

LazyRow的子组件默认采用内容包裹（wrap content）的宽度策略，不会主动占据可用的最大宽度。当Test2嵌套其中时，其内部的Column无法获取到有效的最大宽度约束，导致Row的.fillMaxWidth()修饰符没有生效空间，最终"A"和"B"无法分别居左右排列。而单独使用Test2时，父布局会提供足够的宽度约束，因此布局表现正常。

解决方案 #

给Test2的根布局添加.fillMaxWidth()修饰符，确保它在LazyRow中能占据可用的最大宽度，让内部的Column和Row能正确响应宽度约束。

代码示例 #

修改前的Test2（失效状态）

@Composable
fun Test2() {
    ElevatedCard {
        Column {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text("A")
                Text("B")
            }
        }
    }
}

修改后的Test2（生效状态）

@Composable
fun Test2(modifier: Modifier = Modifier) {
    // 给Card添加fillMaxWidth，确保根布局占据最大宽度
    ElevatedCard(modifier = modifier.fillMaxWidth()) {
        // Column也添加fillMaxWidth，传递宽度约束给子Row
        Column(modifier = Modifier.fillMaxWidth()) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text("A")
                Text("B")
            }
        }
    }
}

在LazyRow中调用Test2

LazyRow {
    item {
        Test2()
    }
}

补充说明 #

如果不想修改Test2的内部实现，也可以直接在LazyRow的item中给Test2添加修饰符：

LazyRow {
    item {
        Test2(modifier = Modifier.fillMaxWidth())
    }
}

核心是确保Test2在LazyRow中获得明确的最大宽度约束，这样内部的Row才能基于该约束实现左右对齐的效果。

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