Jetpack Compose：LazyRow内fillMaxWidth无法占满屏幕求助

场景1：每个横向滚动项占满整个屏幕宽度 #

这种情况下，每个GameSite的宽度和屏幕一致，横向滚动时切换整页内容：

1. 在LazyRow的items中给GameSite添加Modifier.fillMaxWidth()，让每个滚动项占满屏幕宽度；
2. 在GameSite内部的Column上添加Modifier.fillMaxWidth()，确保内部布局能铺满整个项的宽度；
3. 内部的Row直接使用Modifier.fillMaxWidth()即可铺满整个宽度。

代码示例：

// 外层LazyRow
LazyRow(
    modifier = Modifier.fillMaxWidth()
) {
    items(gameDataList) { game ->
        GameSite(
            game = game,
            modifier = Modifier.fillMaxWidth() // 关键：设置每个项占满屏幕宽度
        )
    }
}

// GameSite组件
@Composable
fun GameSite(
    game: Game,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxWidth(), // 继承并确保占满项的宽度
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // 第一个Row，自动铺满宽度
        Row(
            modifier = Modifier.fillMaxWidth().background(Color(0xFFF0F0F0)),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = game.name, fontSize = 18.sp, fontWeight = FontWeight.Bold)
            Text(text = "★ ${game.rating}", fontSize = 16.sp)
        }
        // 第二个Row，同样铺满宽度
        Row(
            modifier = Modifier.fillMaxWidth().background(Color(0xFFF8F8F8)),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "发布时间：${game.releaseDate}", fontSize = 14.sp)
        }
    }
}

场景2：滚动项宽度根据内容自适应，但内部Row铺满项的宽度 #

如果不需要每个项占满屏幕，而是根据内容自动调整宽度，但要求内部Row能铺满当前项的宽度：

1. 无需给LazyRow的items设置固定宽度，保持默认的wrapContent；
2. 在GameSite的Column上添加Modifier.fillMaxWidth()，让Column占满其父项（滚动项）的宽度；
3. 内部的Row使用Modifier.fillMaxWidth()即可自动铺满Column的宽度。

代码示例：

// 外层LazyRow
LazyRow(
    modifier = Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(horizontal = 16.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(gameDataList) { game ->
        GameSite(game = game) // 宽度随内容自适应
    }
}

// GameSite组件
@Composable
fun GameSite(game: Game) {
    Column(
        modifier = Modifier.fillMaxWidth(), // 关键：让Column占满滚动项的宽度
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier.fillMaxWidth().background(Color(0xFFEFEFEF)),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = game.name, modifier = Modifier.padding(8.dp))
            Text(text = game.genre, modifier = Modifier.padding(8.dp))
        }
        Row(
            modifier = Modifier.fillMaxWidth().background(Color(0xFFE5E5E5)),
            horizontalArrangement = Arrangement.End,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "下载量：${game.downloadCount}", modifier = Modifier.padding(8.dp))
        }
    }
}

关键注意点 #

• LazyRow的子项默认宽度为内容包裹，若要让子项占满屏幕，必须显式给子项添加Modifier.fillMaxWidth()；
• 内部Column必须设置Modifier.fillMaxWidth()，否则其宽度会跟随内容，导致Row无法铺满；
• 若需要更灵活的宽度控制（比如占屏幕的80%），可以使用Modifier.fillMaxWidth(0.8f)替代fillMaxWidth()，实现动态适配。

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