如何在Jetpack Compose中统一对齐图标并保持行居中？

问题原因 #

你当前的代码中，Row默认采用wrapContentWidth布局，且未给图标设置固定宽度。当文本长度不一致时，Row的整体宽度会随文本变化，导致图标无法保持在同一垂直列上，同时也难以保证整行内容的居中对齐。

修复后的代码 #

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = modifier
        .fillMaxWidth()
        .background(color = Color(0xFF4d19fe))
        .padding(16.dp)
) {
    // 封装重复的信息行组件，简化代码
    fun InfoRow(icon: ImageVector, text: String, desc: String) {
        Row(
            horizontalAlignment = Alignment.CenterVertically,
            modifier = modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            // 固定图标宽度，确保所有图标对齐
            Icon(
                imageVector = icon,
                contentDescription = desc,
                modifier = modifier.width(24.dp)
            )
            Spacer(modifier = modifier.width(10.dp))
            Text(text = text, fontSize = 20.sp)
        }
        Spacer(modifier = modifier.height(12.dp))
    }

    InfoRow(Icons.Filled.Call, phone, "Phone Number")
    InfoRow(Icons.Filled.Instagram, socialHandle, "Insta Handle")
    InfoRow(Icons.Filled.Email, email, "Email Id")
}

关键调整说明 #

1. 固定图标宽度：给Icon添加width(24.dp)（匹配Compose默认图标尺寸，可按需调整），让所有图标占据相同水平空间，彻底解决对齐问题。
2. 行内垂直居中：Row设置horizontalAlignment = Alignment.CenterVertically，确保图标和文本在垂直方向对齐，视觉更协调。
3. 整行居中：Row通过fillMaxWidth()配合horizontalArrangement = Arrangement.Center，让整行内容在Column中水平居中。
4. 代码优化：封装InfoRow函数减少重复代码，添加内边距和行间距提升UI美观度。
5. 图标修正：原代码中所有行都使用了电话图标，建议换成对应功能的图标（如Instagram、Email），更符合业务场景。

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