Compose中Row组件内Icon与Text无法垂直居中对齐问题求助

在Jetpack Compose中，即便给Row设置了verticalAlignment = Alignment.CenterVertically，Icon仍可能无法与Text完全垂直居中对齐，视觉上存在偏移。

问题代码示例 #

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth(),
) {
    Icon(
        imageVector = Icons.Default.Email,
        tint = TextColor1,
        contentDescription = "email icon",
    )
    Text(
        text = stringResource(R.string.mail_adress),
        color = TextColor1,
        fontSize = 20.sp,
    )
}

问题效果 #

解决方案 #

1. 统一Icon与Text的尺寸 #

Material3的Icon默认尺寸为24.dp，与设置了20.sp fontSize的Text尺寸不匹配，导致视觉偏移。给Icon设置与Text fontSize一致的尺寸即可对齐：

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth(),
) {
    Icon(
        imageVector = Icons.Default.Email,
        tint = TextColor1,
        contentDescription = "email icon",
        modifier = Modifier.size(20.sp) // 匹配Text的字体大小
    )
    Text(
        text = stringResource(R.string.mail_adress),
        color = TextColor1,
        fontSize = 20.sp,
    )
}

2. 基于基线对齐 #

若需保留Icon默认大小，可通过基线对齐让两者视觉上居中：

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth(),
) {
    Icon(
        imageVector = Icons.Default.Email,
        tint = TextColor1,
        contentDescription = "email icon",
        modifier = Modifier.alignByBaseline()
    )
    Text(
        text = stringResource(R.string.mail_adress),
        color = TextColor1,
        fontSize = 20.sp,
        modifier = Modifier.alignByBaseline()
    )
}

3. 微调Icon内边距 #

部分Icon自带内部空白，可通过内边距手动调整位置：

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth(),
) {
    Icon(
        imageVector = Icons.Default.Email,
        tint = TextColor1,
        contentDescription = "email icon",
        modifier = Modifier.padding(top = 2.dp) // 根据实际偏移调整数值
    )
    Text(
        text = stringResource(R.string.mail_adress),
        color = TextColor1,
        fontSize = 20.sp,
    )
}

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