Jetpack Compose自定义键盘部分字母在Box中无法居中求助

问题说明 #

用Jetpack Compose做自定义键盘时，发现y这类带下行的字母，即便在Box容器中设置了contentAlignment = Alignment.Center，视觉上仍偏下，无法和容器中心对齐；但l这类无下行的字母能正常居中。

示例代码：

Box(
    modifier = Modifier
        .size(50.dp)
        .background(Red),
    contentAlignment = Alignment.Center,
) {
    Text("y", fontSize = 30.sp, textAlign = TextAlign.Center)
}

效果对比：

• 显示y时：红色正方形容器内，字母明显偏下，未与容器中心对齐
• 显示l时：字母在红色正方形容器内完美居中

解决方案 #

1. 配置Text的垂直对齐属性 #

给Text添加verticalAlignment = TextAlign.CenterVertically，这个属性会让文本在自身布局空间内垂直居中，配合Box的居中布局，就能解决视觉偏移问题：

Box(
    modifier = Modifier
        .size(50.dp)
        .background(Red),
    contentAlignment = Alignment.Center,
) {
    Text(
        "y",
        fontSize = 30.sp,
        textAlign = TextAlign.Center,
        verticalAlignment = TextAlign.CenterVertically
    )
}

2. 微调偏移（可选） #

如果部分字体仍存在轻微视觉偏移，可以用Modifier.offset手动调整位置：

Box(
    modifier = Modifier
        .size(50.dp)
        .background(Red),
    contentAlignment = Alignment.Center,
) {
    Text(
        "y",
        fontSize = 30.sp,
        textAlign = TextAlign.Center,
        modifier = Modifier.offset(y = (-2).dp)
    )
}

3. 更换适配字体 #

部分字体的字形设计会让下行字母的视觉重心更均衡，比如系统默认的Roboto字体或其他无衬线字体，更换这类字体也能缓解该问题。

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