Jetpack Compose Row 布局中如何实现图片与文本的基线对齐

Modifier.alignBy(FirstBaseline) 对Image组件不生效的核心原因是：只有Text这类文本组件在测量时会生成基线（Baseline）相关的测量值，Image本身没有内置基线属性，所以直接设置不会参与Row的基线对齐逻辑。

你可以使用alignBy()的自定义重载方法，手动指定图片用于对齐的位置，就能实现预期效果：

@Composable
fun Sample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(
            text = "One",
            modifier = Modifier.alignByBaseline(),
            fontSize = 40.sp
        )
        Image(
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .size(24.dp)
                // 自定义对齐位置：返回的数值是从图片顶部到对齐锚点的像素值
                // 这里返回图片高度代表用图片底部作为对齐锚点，和文本基线对齐
                .alignBy { it.measuredHeight },
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "",
        )
        Text(
            text = "two",
            modifier = Modifier.alignByBaseline(),
            fontSize = 40.sp
        )
    }
}

如果默认的底部对齐不符合你的设计需求，你可以灵活调整lambda中的返回值：

• 要让图片垂直中心对齐文本基线：返回 it.measuredHeight / 2
• 要微调对齐位置可以加减偏移值，比如 it.measuredHeight - 2.dp.toPx() 可以让图片整体上移2dp对齐

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