Compose 中 Text 控件对齐方式深度总结

Compose 中 Text 控件对齐方式深度总结

一、内部对齐：文字在文本框（Text 控件）里面怎么站？

当 Text 的尺寸（由 Modifier 指定）大于文字实际占用的空间时，内部对齐才生效。

代码示例

Text(
    text = "Hello",
    modifier = Modifier
        .size(width = 200.dp, height = 100.dp)
        .background(Color.Yellow)
        // 关键：让文字在 100.dp 高度内垂直居中
        .wrapContentHeight(Alignment.CenterVertically), 
    textAlign = TextAlign.Center // 让文字在 200.dp 宽度内水平居中
)

请谨慎使用此类代码。

二、外部对齐：文本框（Text 控件）在父容器里怎么站？

这取决于父容器（Box, Column, Row）的特性。

1. 在 Box 中（现在的写法）

由 Box 的 contentAlignment 或 Text 的 Modifier.align 决定。

Box(modifier = Modifier.size(200.dp), contentAlignment = Alignment.BottomEnd) {
    Text("我在右下角")
}

请谨慎使用此类代码。

2. 在 Column / Row 中

使用 horizontalAlignment (Column) 或 verticalAlignment (Row)。

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("我在水平居中")
}

请谨慎使用此类代码。

三、核心区别对照表（避坑指南）

四、为什么“有区别”？

点击热区差异：

• 如果在 Text 内部用 wrapContentHeight，点击事件绑在 Text 上，热区完全可控。
• 如果用 Box 居中，点击事件绑在 Box 上，即使用户点到文字边缘的空白处（Box 区域内），也会触发点击。

基线（Baseline）对齐：

• Text 内部对齐会考虑文字的基线（如 g 的下半部分）。
• Box 居中是纯物理几何中心对齐，有时视觉上会觉得文字偏上了一点点（因为没算基线偏移）。

总结建议：

使用 Box(contentAlignment = Alignment.Center) 是最完美的方案，因为它提供了最大的点击面积，且代码逻辑最清晰。