Jetpack Compose横向滚动Row无内容显示问题（已获取数据）

核心问题 #

横向滚动Row无法显示内容，根源在于以下几点：

• Row尺寸限制过严：GameList中的Row设置了固定的width(50.dp)和height(50.dp)，远小于GameCard内图片的100dp宽高，导致内容被完全裁剪。
• Modifier顺序错误：padding放在horizontalScroll之后，挤压了滚动区域的可显示空间。
• 尺寸继承冲突：GameCard的fillMaxSize()会继承Row的50dp尺寸，而内部图片设置了100dp宽高，超出部分被裁剪。

修改后的代码 #

1. 修复GameList组件 #

去掉固定宽高限制，调整Modifier顺序，让Row自适应空间并支持横向滚动：

@Composable
fun GameList(
    gameList: List<Result>,
    it: PaddingValues
) {
    Box {
        Row(
            modifier = Modifier
                .fillMaxWidth() // 让Row占满屏幕宽度
                .padding(it) // 先设置padding，再应用滚动
                .horizontalScroll(rememberScrollState())
                .height(IntrinsicSize.Min) // 根据子项高度自适应Row高度
        ) {
            gameList.forEach { game ->
                GameCard(game = game)
            }
        }
    }
}

2. 修复GameCard组件 #

移除fillMaxSize()，给Card设置匹配图片的固定尺寸：

@Composable
fun GameCard(
    game: Result
) {
    Card(
        shape = MaterialTheme.shapes.small,
        modifier = Modifier
            .size(100.dp) // 设置Card宽高与图片一致
            .padding(10.dp),
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        game.background_image?.let { url ->
            val image = loadPicture(url = url, defaultImage = DEFAULT_Game_IMAGE).value
            image?.let { img ->
                Image(
                    bitmap = img.asImageBitmap(),
                    contentDescription = "gameImage",
                    modifier = Modifier.fillMaxSize(), // 让图片填满Card
                    contentScale = ContentScale.Crop
                )
            }
        }
    }
}

3. 主界面代码保持不变 #

主界面的Scaffold和GameList调用无需修改，数据已正常获取，组件修复后即可显示内容。

额外优化建议 #

如果游戏列表数据量较大，推荐用LazyRow替代Row+horizontalScroll，支持按需加载，性能更优：

@Composable
fun GameList(
    gameList: List<Result>,
    it: PaddingValues
) {
    Box {
        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(it),
            contentPadding = PaddingValues(horizontal = 10.dp), // 列表左右内边距
            horizontalArrangement = Arrangement.spacedBy(10.dp) // 子项间距
        ) {
            items(gameList) { game ->
                GameCard(game = game)
            }
        }
    }
}

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