Jetpack Compose：如何在SpanStyle中实现Gravity.CENTER_VERTICAL垂直居中

你需要让不同字号的文本实现垂直居中，但要求不能使用Box、Row等容器组件，仅通过SpanStyle调整。默认情况下，Text组件里不同字号的文本是基于基线对齐的，会出现小字号文本偏下的问题，通过SpanStyle的baselineShift属性调整基线偏移就能实现需求。

解决方案代码 #

val largeFontSize = 32.sp
val smallFontSize = 14.sp
// 计算小文本需向上偏移的距离：取大、小字号差值的一半，让两者中心对齐
val offset = (largeFontSize - smallFontSize) / 2
// 转换为相对于大字号的比例，baselineShift的Custom参数是偏移量与当前文本行高的比值
val baselineShiftRatio = offset.toPx() / largeFontSize.toPx()

val spanString = buildAnnotatedString {
    withStyle(
        SpanStyle(
            color = Color(0xFF333333),
            fontSize = largeFontSize
        )
    ) {
        append("Jetpack")
    }
    withStyle(
        SpanStyle(
            color = Color(0xFF999999),
            fontSize = smallFontSize,
            fontWeight = FontWeight.Bold,
            baselineShift = BaselineShift.Custom(baselineShiftRatio)
        )
    ) {
        append(" Compose")
    }
}

Text(
    modifier = Modifier.background(color = Color.White),
    text = spanString
)

原理说明 #

• baselineShift用于调整文本基线位置，BaselineShift.Custom()接收的比例值是偏移量相对当前文本行高的占比。
• 取大、小字号差值的一半作为偏移量，能让小文本的中心与大文本的中心对齐，达成垂直居中的效果。

效果对比 #

• 当前效果：小字号文本基于大字号文本基线对齐，整体位置偏下
• 期望效果：小字号文本与大字号文本垂直居中对齐

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