Jetpack Compose中如何让行内图片保持相同尺寸？

在Jetpack Compose中实现图片在上、文本在下的双项布局，通过Row包裹两个OnePlayer可组合项实现，但添加图片后左侧图片尺寸明显大于右侧，仅显示文本时两个文本尺寸一致。需求是让两张图片尺寸完全相同，下方对应显示文本。

原布局代码：

Box(
    modifier.fillMaxSize()
){
    Box(
        modifier
            .clip(RoundedCornerShape(10.dp))
            .fillMaxWidth(0.95f)
            .fillMaxHeight(0.15f)
            .background(Color.DarkGray)
            .align(Alignment.Center)
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxSize()
        ) {
            OnePlayer(name = "Gabriel Clemens", id = R.drawable.gabriel_clemens)
            OnePlayer(name = "Martin Schindler", id = R.drawable._8111069)
        }
    }
}

OnePlayer可组合项代码：

@Composable
fun OnePlayer(
    modifier: Modifier = Modifier,
    name: String,
    id: Int
) {
    Column(){
        Image(
            painter = painterResource(id = id),
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            modifier = Modifier.fillMaxWidth(0.5f)
        )
        Text(
            text = name,
        )
    }
}

问题原因 #

OnePlayer中的Image使用fillMaxWidth(0.5f)是基于父容器Column的宽度，但Row未给两个OnePlayer分配固定的均等宽度，导致Column的宽度由图片自身原始尺寸决定——原始尺寸大的图片会撑宽Column，进而让该Image的显示尺寸更大。

修改步骤 #

1. 给Row内的OnePlayer分配均等宽度：在每个OnePlayer的Modifier中添加weight(1f)，让两个项平分Row的可用宽度，保证基础容器尺寸一致。
2. 调整Image的尺寸约束：将Image的fillMaxWidth(0.5f)改为fillMaxWidth()，让图片占满Column的宽度；若需要固定宽高比（比如正方形），可添加.aspectRatio(1f)。
3. 优化文本对齐：给Column添加horizontalAlignment = Alignment.CenterHorizontally，让文本在图片下方居中，符合预期布局。

修改后的代码 #

外层布局代码

Box(
    modifier.fillMaxSize()
){
    Box(
        modifier
            .clip(RoundedCornerShape(10.dp))
            .fillMaxWidth(0.95f)
            .fillMaxHeight(0.15f)
            .background(Color.DarkGray)
            .align(Alignment.Center)
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxSize()
        ) {
            // 添加weight(1f)让两个OnePlayer平分宽度
            OnePlayer(
                modifier = Modifier.weight(1f),
                name = "Gabriel Clemens",
                id = R.drawable.gabriel_clemens
            )
            OnePlayer(
                modifier = Modifier.weight(1f),
                name = "Martin Schindler",
                id = R.drawable._8111069
            )
        }
    }
}

修改后的OnePlayer代码

@Composable
fun OnePlayer(
    modifier: Modifier = Modifier,
    name: String,
    id: Int
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally // 文本居中
    ){
        Image(
            painter = painterResource(id = id),
            contentDescription = "Player avatar", // 补充有意义的内容描述
            contentScale = ContentScale.Crop, // 裁剪适配容器，保留比例用ContentScale.Fit
            modifier = Modifier
                .fillMaxWidth() // 占满Column宽度
                .aspectRatio(1f) // 可选：设置宽高比为1，保证正方形
        )
        Text(
            text = name,
            modifier = Modifier.padding(top = 4.dp) // 给文本添加上边距，分隔图片与文本
        )
    }
}

额外说明 #

• contentScale按需选择：ContentScale.Crop会裁剪图片填满容器，ContentScale.Fit会保持图片完整比例并适配容器。
• 若需要固定图片高度，可替换.aspectRatio(1f)为.height(xx.dp)，同时保留fillMaxWidth()让宽度自适应。

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