Jetpack Compose中行对齐：基于首行定位第二、三行

要让第二、第三行和第一行保持完全一致的水平位置对齐，核心是让每行的图标区域宽度统一，确保文字从同一水平起点开始。当前代码的问题在于每个Row单独居中，但每行的图标+文字总宽度不同，导致元素无法对齐。

修改方案一：固定图标宽度 #

给所有Image设置相同的固定宽度（匹配图标的实际尺寸，比如24dp），这样每行的图标区域宽度一致，文字自然对齐：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 48.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Row(
        modifier = Modifier.wrapContentWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(24.dp)
                .padding(end = 32.dp, bottom = 16.dp),
            painter = painterResource(R.drawable.baseline_phone_24),
            contentDescription = null
        )
        Text(text = "+11 (123) 444 555 666")
    }

    Row(
        modifier = Modifier.wrapContentWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(24.dp)
                .padding(end = 32.dp, bottom = 16.dp),
            painter = painterResource(R.drawable.baseline_share_24),
            contentDescription = null
        )
        Text(text = "@AndroidDev")
    }

    Row(
        modifier = Modifier.wrapContentWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(24.dp)
                .padding(end = 32.dp),
            painter = painterResource(R.drawable.baseline_email_24),
            contentDescription = null
        )
        Text(text = "jen.doe@andorid.com")
    }
}

修改方案二：使用固有尺寸约束 #

如果不想硬编码宽度，可以利用IntrinsicSize让所有图标自动匹配最大图标的宽度，保持布局灵活性：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 48.dp)
        .width(IntrinsicSize.Max),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(IntrinsicSize.Max)
                .padding(end = 32.dp, bottom = 16.dp),
            painter = painterResource(R.drawable.baseline_phone_24),
            contentDescription = null
        )
        Text(text = "+11 (123) 444 555 666", modifier = Modifier.weight(1f))
    }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(IntrinsicSize.Max)
                .padding(end = 32.dp, bottom = 16.dp),
            painter = painterResource(R.drawable.baseline_share_24),
            contentDescription = null
        )
        Text(text = "@AndroidDev", modifier = Modifier.weight(1f))
    }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .width(IntrinsicSize.Max)
                .padding(end = 32.dp),
            painter = painterResource(R.drawable.baseline_email_24),
            contentDescription = null
        )
        Text(text = "jen.doe@andorid.com", modifier = Modifier.weight(1f))
    }
}

关键修改点说明 #

1. Column设置horizontalAlignment = Alignment.CenterHorizontally：让所有Row整体居中，替代每个Row单独设置居中，避免因行宽不同导致的偏移。
2. 统一图标宽度：通过固定宽度或固有尺寸约束，确保每行图标占据相同水平空间，使文字起始位置完全对齐。
3. Row使用wrapContentWidth或配合weight：根据需求选择布局方式，保证元素对齐的同时保持布局灵活性。

内容的提问来源于stack exchange，提问作者Lev T.