Jetpack Compose中如何让组件与Text首行垂直对齐？

你遇到的问题根源在于Row默认垂直对齐方式为Alignment.Center，当字体缩放导致文本换行、整体高度增加时，Icon会被居中到Row的垂直中间位置，而非文本首行位置。无需复杂测量，以下两种简单方案可解决该问题：

方案一：设置Row顶部垂直对齐 #

直接给Row添加verticalAlignment = Alignment.Top，让Icon和Text沿Row顶部对齐，无论文本是否换行、字体缩放比例多少，Icon都会与Text首行顶部保持对齐：

@Composable
fun ExpandableCard(
    expanded: Boolean
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(Dimens.commonMdSpacing),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Top // 添加顶部对齐配置
    ) {
        Icon(
            imageVector = if (expanded)
                Icons.Default.RemoveCircleOutline
            else
                Icons.Default.AddCircleOutline,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier
                .size(22.dp)
                .border(1.dp, Color.Black)
        )
        Text(
            text = "Some really really really really really long title",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier
                .padding(start = 16.dp)
                .border(1.dp, Color.Black)
        )
    }
}

方案二：让Icon与Text基线对齐 #

若需更符合文字排版规范的对齐（图标与文字基线对齐），可使用alignByBaseline修饰符，让两者基线对齐，不同字体缩放比例下也能保持自然的对齐效果：

@Composable
fun ExpandableCard(
    expanded: Boolean
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(Dimens.commonMdSpacing),
        horizontalArrangement = Arrangement.Start
    ) {
        Icon(
            imageVector = if (expanded)
                Icons.Default.RemoveCircleOutline
            else
                Icons.Default.AddCircleOutline,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier
                .size(22.dp)
                .border(1.dp, Color.Black)
                .alignByBaseline() // 配置基线对齐
        )
        Text(
            text = "Some really really really really really long title",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier
                .padding(start = 16.dp)
                .border(1.dp, Color.Black)
                .alignByBaseline() // 配置基线对齐
        )
    }
}

两种方案均无需额外视图测量逻辑，方案一更偏向顶部对齐的视觉效果，方案二更贴合常规图文排版规范，可根据需求选择。

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