在 Jetpack Compose 中实现拼音与四线三格的精准对齐

在开发教育类或工具类 App 时，绘制“拼音四线三格”是一个经典需求。看似简单的几条线加一个 Text，但在实际适配中，开发者往往会遇到两个头疼的问题：

1. 字号不兼容：大字号看着居中，小字号（如 13sp）明显偏上。
2. 宽度难自适应：要么撑满全屏，要么拼音字母贴着边缘，缺乏美感。

本文将通过深度定制 Layout，带你实现一个像素级对齐、宽度自适应的拼音组件。

---

一、 为什么传统的对齐方式会失效？

在 Android 的字体模型中，文字的排列并不是基于物理中心，而是基于 Baseline（基准线） 。

对于拼音而言：

• 中格：对应 $x-height$，即 $a, o, e$ 等小写字母占据的空间。
• 上格/下格：用于声调符号（如 $ā$）和下延部分（如 $g, p$）。

当你使用 Box(contentAlignment = Alignment.Center) 时，Compose 是根据字体的“外接矩形”进行居中。由于不同字号下，字体内部留白（Padding）和声调占据的空间比例并不线性统一，导致小字号下的视觉中心会发生严重的向上偏移。

---

二、 核心方案：基于 Baseline 的绝对定位

要解决“玄学偏移”，最硬核的方法是：不管字体怎么变，强制把拼音的 Baseline 钉在四线格的第三条线上。

1. 确定比例规范

根据教学规范，四线三格的高度建议设为字号的 1.5 倍。此时：

• 总高度 = $fontSize \times 1.5$
• 第三线位置 = $总高度 \times \frac{2}{3}$

2. 使用自定义 Layout 实现自适应宽度

我们通过自定义 Layout 测量 Text 的实际物理宽度，并动态调整 Canvas 的横线长度，实现 wrapContent 效果。

Kotlin

@Composable
fun PinyinGrid(
    pinyin: String,
    modifier: Modifier = Modifier,
    fontSize: TextUnit = 16.sp,
    textColor: Color = Color(0xFF161616),
) {
    val density = LocalDensity.current
    // 定义总高度为字号的 1.5 倍
    val gridHeight = with(density) { fontSize.toDp() * 1.5f }

    Layout(
        modifier = modifier.height(gridHeight),
        content = {
            // 背景线绘制层：负责画四条线
            Canvas(modifier = Modifier.fillMaxSize()) {
                val h = size.height
                val step = h / 3
                val stroke = 0.5.dp.toPx()
                repeat(4) { i ->
                    val y = i * step
                    drawLine(Color(0xFFE5E5E5), Offset(0f, y), Offset(size.width, y), stroke)
                }
            }
            // 拼音文本层
            Text(
                text = pinyin,
                fontSize = fontSize,
                color = textColor,
                style = TextStyle(
                    platformStyle = PlatformTextStyle(includeFontPadding = false) // 必须禁用内边距
                )
            )
        }
    ) { measurables, constraints ->
        // 1. 测量文字，获取其实际占据的宽度
        val textPlaceable = measurables[1].measure(constraints)
        
        // 2. 计算组件总宽度：文字宽度 + 左右各 4dp 的呼吸间距
        val horizontalPadding = with(density) { 4.dp.toPx() }.toInt()
        val contentWidth = textPlaceable.width + horizontalPadding * 2
        
        // 3. 强制背景 Canvas 匹配这个宽度
        val canvasPlaceable = measurables[0].measure(
            constraints.copy(minWidth = contentWidth, maxWidth = contentWidth)
        )

        // 4. 计算垂直对齐的像素偏移
        // 获取该字体当前的真实 Baseline 距离文字顶部的距离
        val firstBaseline = textPlaceable[FirstBaseline]
        // 目标位置：Baseline 必须落在总高度的 2/3 处
        val targetBaselineY = canvasPlaceable.height * (2 / 3f)

        layout(contentWidth, canvasPlaceable.height) {
            // 摆放背景
            canvasPlaceable.placeRelative(0, 0)
            
            // 摆放文字：水平居中，垂直通过 Baseline 精准定位
            val textX = (contentWidth - textPlaceable.width) / 2
            val textY = (targetBaselineY - firstBaseline).toInt()
            
            textPlaceable.placeRelative(textX, textY)
        }
    }
}

---

三、 技术要点解析

1. 为什么使用 Layout 而不是 Box？

在 Layout 的 MeasureScope 中，我们可以通过 textPlaceable[FirstBaseline] 直接拿到文字内部基准线的物理坐标。这是 Box 无法做到的像素级控制。

2. includeFontPadding = false 的重要性

Android 系统默认会在字体上方预留一部分空间（用于适配某些极高字符），这会导致拼音在格子内整体下沉。禁用它能获得最纯净的渲染区域。

3. 视觉补偿

虽然物理上 Baseline 踩在了第三线上，但由于圆弧字母（如 $a, c, e$）在视觉上会有“收缩感”，如果你追求极致美感，可以在 targetBaselineY 上额外加 0.5.dp 的微调偏移，补偿读者的视觉误差。

---

四、 总结

通过自定义 Layout 锚定 FirstBaseline，我们彻底解决了拼音在 Compose 开发中受制于字体度量导致的偏移问题。该组件目前支持：

• 全字号适配：从 10sp 到 100sp 均能精准踩线。
• 宽度自适应：根据拼音长度自动伸缩，两端保留美观间距。

---

想要进一步扩展？

你可以尝试将 contentWidth 改为 canvasPlaceable.height，从而快速实现正方形的“拼音格本”效果。

---