Jetpack Compose中Row组件内图标与文字垂直居中失效问题求助

问题原因 #

• 外层排列所有BottomIconItem的Row组件未配置垂直对齐规则，不同高度的子项默认采用顶对齐，自然无法整体居中。你只给了每个BottomIconItem内部的Row加了垂直居中，但是外层父容器的对齐规则没配置，是问题的核心诱因。
• 你使用的xml格式矢量图标存在内置边距：大部分符合Material规范的矢量图标默认自带上下留白，即便你指定了size属性，实际绘制的图形区域也会小于设定尺寸，且留白分布不均会进一步放大对齐偏差。
• 文字自带基线偏移：14sp的文字默认包含字体预留的上下行高空间，和图标按居中规则对齐时，会因为基线和图形中心不重合出现视觉上的偏移。

解决方案 #

1. 给外层Row添加垂直居中配置，这是最优先排查的修改点：

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    // 新增以下行配置垂直居中
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 10.dp)
) {
    // 原有子项代码保持不变
}

2. 修正矢量图内置边距：打开对应xml图标文件，删除根节点下所有android:paddingXXX属性，调整viewportWidth、viewportHeight和路径坐标，保证图形内容完全充满画布。也可以给Icon组件额外加Modifier.align(Alignment.CenterVertically)强制对齐。
3. 微调文字对齐规则：如果调整后仍存在微小的视觉偏差，可以给Text组件添加Modifier.alignByBaseline()，或者用Modifier.offset(y = 1.dp)做1-2dp的位置微调即可。
4. 可选的兜底方案：给BottomIconItem的根Row设置固定高度（比如height(28.dp)），配合verticalAlignment = Alignment.CenterVertically，也可以规避子项高度不一致导致的对齐问题。

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