Jetpack Compose中如何让文本与图标垂直居中对齐？

常见修复方案 #

• 显式为Text设置垂直对齐：
  在Text组件中添加modifier = Modifier.align(Alignment.CenterVertically)，覆盖文本默认的基线对齐行为，确保其在Row中垂直居中。

  调整后的代码示例：

  AnimatedVisibility(visible = expanded) {
      Row(verticalAlignment = Alignment.CenterVertically) {
          Icon(
              modifier = modifier
                  .padding(5.dp),
              imageVector = Icons.Default.Email,
              contentDescription = "email icon"
          )
          Text(
              text = state.email,
              modifier = Modifier.align(Alignment.CenterVertically)
          )
      }
  }
  

• 微调Icon的垂直偏移：
  部分Material Icons的视觉中心与布局框中心存在偏差，可通过偏移修正对齐效果：

  Icon(
      modifier = modifier
          .padding(5.dp)
          .offset(y = (-2).dp), // 根据实际显示效果调整偏移量
      imageVector = Icons.Default.Email,
      contentDescription = "email icon"
  )
  

• 检查继承的Modifier：
  确认代码中传入的modifier变量是否包含固定尺寸、额外对齐等设置，这类配置可能干扰Row的垂直居中逻辑，可临时替换为Modifier排查问题。

• 统一元素尺寸基准：
  为Icon和Text设置匹配的高度，确保对齐基准一致：

  Row(verticalAlignment = Alignment.CenterVertically) {
      Icon(
          modifier = modifier
              .padding(5.dp)
              .size(20.dp), // 与文本行高匹配
          imageVector = Icons.Default.Email,
          contentDescription = "email icon"
      )
      Text(
          text = state.email,
          fontSize = 16.sp,
          lineHeight = 20.sp // 与Icon尺寸匹配
      )
  }
  

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