Jetpack Compose固定宽高的TextView如何实现文本水平垂直双居中

TextAlign.Center 仅负责控制文本在组件宽度范围内的水平对齐逻辑，不涉及垂直方向的排布规则。你为Text组件设置了固定40dp高度后，文本默认会沿组件顶部对齐，因此仅能看到水平居中效果。

以下是两种常用的实现方案：

• 方案1：给Text的Modifier添加wrapContentHeight配置，指定垂直方向居中对齐
  只需要在原有Modifier最后追加.wrapContentHeight(align = Alignment.CenterVertically)即可，修改后的Text代码如下：

  Text(
      text = "Hello",
      modifier = Modifier.background(color = backgroundColor)
          .clickable(onClick = { isSelected = !isSelected })
          .width(100.dp)
          .height(40.dp)
          .wrapContentHeight(align = Alignment.CenterVertically),
      textAlign = TextAlign.Center,
  )
  

• 方案2：使用padding替代固定宽高，更符合Compose声明式布局最佳实践
  不需要手动控制对齐，通过内边距自动撑开的容器天然会让文本居中，适配性更强：

  Text(
      text = "Hello",
      modifier = Modifier.background(color = backgroundColor)
          .clickable(onClick = { isSelected = !isSelected })
          .padding(horizontal = 30.dp, vertical = 11.dp), // 可调整数值达到你需要的100dp*40dp效果
      textAlign = TextAlign.Center,
  )
  

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