Flutter中如何实现RichText内图标与文本垂直居中对齐？

使用FlutterRichText组件实现行内文本+图标组合，后续计划为内容添加点击交互时，出现图标与文本垂直位置错位问题，图标尺寸增大时问题更加明显。已尝试配置RichText的textAlign: TextAlign.center，同时逐一测试WidgetSpan的4种对齐配置：默认无对齐参数、alignment: PlaceholderAlignment.Middle、alignment: PlaceholderAlignment.Top、alignment: PlaceholderAlignment.Bottom，均未实现同一行内图标与文本垂直居中的预期效果。

原有问题代码：

RichText(
  textAlign: TextAlign.center,
  text: TextSpan(
    children: [
      TextSpan(text: 'Next ', style: richBotton),
      WidgetSpan(
          child: Icon(Icons.arrow_forward_ios, color: Colors.grey, size: 11,)
      ),
    ],
  ),
),

原有样式定义：

final richBotton = const TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 11,);  
final text = const TextStyle(color: Colors.grey, fontSize: 11); 

• RichText的textAlign属性仅控制多行文本整体的水平对齐规则，不会影响行内嵌入组件的垂直对齐位置，因此修改该参数无法解决错位问题。
• 单独给WidgetSpan配置PlaceholderAlignment.middle不生效，是因为默认TextStyle未指定明确的行高（height）参数，文本中线的计算基准受系统字体渲染规则影响出现偏移。
• 部分Material图标（如arrow_forward_ios）本身绘制时存在微小的视觉边距偏移，会进一步加剧错位感知。

方案1：保留RichText实现，修正对齐配置 #

给文本样式明确指定行高基准，搭配PlaceholderAlignment.middle，必要时通过微小偏移修正图标自带的视觉偏差：

RichText(
  textAlign: TextAlign.center,
  text: TextSpan(
    children: [
      TextSpan(
        text: 'Next ',
        // 明确指定行高为1，锁定文本中线计算基准
        style: richBotton.copyWith(height: 1),
      ),
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        // 针对图标自带的视觉偏移做微量调整，偏移量可根据实际显示效果微调
        child: Transform.translate(
          offset: const Offset(0, -0.5),
          child: const Icon(
            Icons.arrow_forward_ios,
            color: Colors.grey,
            size: 11,
          ),
        ),
      ),
    ],
  ),
)

方案2：换用Row实现，零对齐成本 #

如果富文本嵌套逻辑不复杂，直接用Row组合文本和图标，原生支持垂直居中配置，后续添加点击交互也更简单，适配任意图标尺寸不会出现错位：

// 外层包GestureDetector/InkWell即可实现点击交互
GestureDetector(
  onTap: () {
    // 写入点击逻辑
  },
  child: Row(
    mainAxisSize: MainAxisSize.min, // 让行宽度适配内容，不会默认撑满父容器
    crossAxisAlignment: CrossAxisAlignment.center, // 强制子组件垂直居中对齐
    children: [
      Text('Next', style: richBotton),
      const SizedBox(width: 2), // 按需调整文本和图标的间距
      Icon(
        Icons.arrow_forward_ios,
        color: Colors.grey,
        size: 11,
      ),
    ],
  ),
)

• 需要实现大段富文本内嵌入图标（比如段落中间插入图标）的场景，选择方案1。
• 仅做简单的文本+图标组合可点击按钮的场景，优先选方案2，维护成本更低，对齐效果更稳定。

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