Jetpack Compose中ConstraintLayout文本与图片上下对齐问题如何解决

问题核心原因 #

Jetpack Compose 的 Text 组件默认开启了 includeFontPadding 属性，会为字体的升降部自动预留额外上下间距，这是约束逻辑正确但对齐效果不符合预期的根本原因。

修复方案 #

1. 关闭默认字体内边距

给两个 Text 组件都添加 includeFontPadding = false 参数，移除系统自动添加的预留间距，修改后的代码如下：

@Composable
fun ShowSplashHeader() {
    ConstraintLayout() {
        val (logo, text1, text2) = createRefs()
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = null,
            modifier = Modifier.constrainAs(logo) {
                top.linkTo(parent.top, margin = 32.dp)
                start.linkTo(parent.start, margin = 16.dp)
            }
            .size(45.dp)
        )
        Text(
            "First line text",
            style = MaterialTheme.typography.h6,
            color = colorResource(R.color.green_light),
            // 关闭默认字体预留padding
            includeFontPadding = false,
            modifier = Modifier.constrainAs(text1) {
                top.linkTo(logo.top, margin = 0.dp)
                start.linkTo(logo.end, margin = 4.dp)
            }
        )
        Text(
            "Second line text",
            style = MaterialTheme.typography.h6,
            color = colorResource(R.color.green_light),
            // 关闭默认字体预留padding
            includeFontPadding = false,
            modifier = Modifier.constrainAs(text2) {
                start.linkTo(text1.start)
                bottom.linkTo(logo.bottom, margin = 0.dp)
            }
        )
    }
}

2. （可选）基线精准对齐

如果关闭默认padding后仍有细微偏差，可以改用文本基线做约束，实现更精准的对齐效果：

• 第一行文本用firstBaseline约束到图片顶部
• 第二行文本用lastBaseline约束到图片底部
  示例约束代码如下：

// 第一行文本约束
modifier = Modifier.constrainAs(text1) {
    firstBaseline.linkTo(logo.top, margin = 0.dp)
    start.linkTo(logo.end, margin = 4.dp)
}
// 第二行文本约束
modifier = Modifier.constrainAs(text2) {
    start.linkTo(text1.start)
    lastBaseline.linkTo(logo.bottom, margin = 0.dp)
}

内容的提问来源于stack exchange，提问作者Draško