Jetpack Compose内部Row中图片无法居中并排显示的问题

问题原因 #

你代码里第一个包裹黑色圆点的内部Row设置了Modifier.fillMaxWidth()，这个修饰符会让该Row占据父Row的全部可用宽度，导致后面的所有Row都被挤出屏幕，所以只能看到左侧第一张图。

修复方案 #

把第一个内部Row的.fillMaxWidth()去掉，换成.wrapContentWidth()，让每个内部Row只占据自身内容的宽度，这样父Row的Arrangement.Center才能正常工作，所有图片就能居中并排显示了。

修复后的代码片段 #

Row(
    modifier = Modifier
        .padding(start = 21.dp, end = 6.dp, top = 600.dp)
        .fillMaxWidth()
        .absolutePadding(bottom = 100.dp),
    horizontalArrangement = Arrangement.Center
) {
    // 移除fillMaxWidth，换成wrapContentWidth
    Row(
        modifier = Modifier
            .wrapContentWidth()
            .wrapContentHeight()
            .padding(top = 26.dp)
    ) {
        Image(painter = painterResource(id = R.drawable.blackcircle), contentDescription = null,
            modifier = Modifier.width(11.dp).height(11.dp))
    }
    Spacer(modifier = Modifier.width(5.dp))
    Row(
        modifier = Modifier
            .wrapContentHeight()
            .wrapContentWidth()
            .padding(top = 26.dp)
    ) {
        Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
            modifier = Modifier.width(11.dp).height(11.dp))
    }
    Spacer(modifier = Modifier.width(5.dp))
    Row(
        modifier = Modifier
            .wrapContentWidth()
            .wrapContentHeight()
            .padding(top = 26.dp)
    ) {
        Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
            modifier = Modifier.width(11.dp).height(11.dp))
    }
    Spacer(modifier = Modifier.width(5.dp))
    Row(
        modifier = Modifier
            .wrapContentHeight()
            .wrapContentWidth()
            .padding(top = 26.dp)
    ) {
        Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
            modifier = Modifier.width(11.dp).height(11.dp))
    }
}

额外优化建议 #

其实每个图片不需要单独用Row包裹，直接把Image放在父Row里即可，这样代码更简洁：

Row(
    modifier = Modifier
        .padding(start = 21.dp, end = 6.dp, top = 600.dp)
        .fillMaxWidth()
        .absolutePadding(bottom = 100.dp),
    horizontalArrangement = Arrangement.spacedBy(5.dp), // 用spacedBy替代Spacer，更简洁
    verticalAlignment = Alignment.CenterVertically
) {
    Image(painter = painterResource(id = R.drawable.blackcircle), contentDescription = null,
        modifier = Modifier.width(11.dp).height(11.dp).padding(top = 26.dp))
    Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
        modifier = Modifier.width(11.dp).height(11.dp).padding(top = 26.dp))
    Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
        modifier = Modifier.width(11.dp).height(11.dp).padding(top = 26.dp))
    Image(painter = painterResource(id = R.drawable.greycircle), contentDescription = null,
        modifier = Modifier.width(11.dp).height(11.dp).padding(top = 26.dp))
}

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