Jetpack Compose中Row内Image与Text垂直对齐偏移问题

该偏移由3个常见配置问题导致：

1. 给Text配置了Modifier.fillMaxHeight()：Row的Alignment.CenterVertically居中逻辑依赖子组件自身的内容高度计算偏移，fillMaxHeight()会强制Text占满Row的全部高度，此时文本内容仅在Text组件内部按排版规则排布，不再参与Row的子项居中计算。
2. Text默认字体边距：Compose Text默认会为字体的上伸部、下伸部（如下探字母g、上延注音符号）预留固定空间，即使当前显示文本没有用到这部分区域，预留空间也不会自动消失，直接造成上下视觉间距不等。
3. 图标资源自带透明边距：如果星形图标矢量源文件四周存在透明留白，也会让对齐计算出现偏差，造成视觉上的错位。

首先移除Text上的fillMaxHeight()修饰符，让Text高度跟随内容自适应，之后通过基线对齐+关闭字体边距的方式实现精准对齐，修复后完整代码如下：

@Composable
fun MyRating() {
    Row(
        modifier = Modifier
            .background(color = Color.Green)
            .wrapContentSize(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        val text = buildAnnotatedString {
            withStyle(MyTheme.typography.bodyStrongS.toSpanStyle()) { append("4.0") }
            withStyle(MyTheme.typography.bodyS.toSpanStyle()) { append("/5") }
        }

        Image(
            painter = painterResource(id = R.drawable.ic_star),
            colorFilter = ColorFilter.tint(Color.Red),
            modifier = Modifier
                .height(16.dp)
                .alignBy(FirstBaseline),
            contentDescription = null
        )
        Text(
            modifier = Modifier.padding(start = 4.dp),
            text = text,
            style = LocalTextStyle.current.merge(
                TextStyle(
                    platformStyle = PlatformTextStyle(includeFontPadding = false)
                )
            )
        )
    }
}

配置说明：

• alignBy(FirstBaseline) 强制星形图标对齐文本第一行基线，避免不同字体的高度计算规则带来的视觉偏移
• includeFontPadding = false 关闭Text默认的上下字体预留边距，该配置从Compose 1.2.0版本开始正式支持
• 如果调整后仍有1dp以内的微小偏移，可检查图标资源的透明边距，或给Image添加graphicsLayer { translationY = 0.5.dp }做视觉校准。

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