Flutter中如何实现Row内图像与相邻文本按字母基线垂直对齐

问题根因 #

Flutter中CrossAxisAlignment.baseline仅对自带基线属性的文本类组件生效，Image属于普通绘制组件，没有内置的基线坐标参考，框架无法计算它的基线对齐位置，因此会默认采用顶部对齐，和预期效果不符。

解决方案 #

方案1：使用WidgetSpan嵌入文本流（推荐，和HTML默认对齐效果完全一致） #

将图片作为WidgetSpan嵌入到Text.rich的文本流中，指定基线对齐规则即可自动适配：

static Widget _buildLogo() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      SizedBox(width: 15.0),
      Text.rich(
        TextSpan(
          children: [
            WidgetSpan(
              alignment: PlaceholderAlignment.baseline,
              baseline: TextBaseline.alphabetic,
              child: Image.asset("assets/images/header-logo-red_256_solid.png", height: 20),
            ),
            WidgetSpan(child: SizedBox(width: 10.0)),
            TextSpan(
              text: 'Text',
              style: TextStyle(
                fontSize: 28.0,
                backgroundColor: Colors.green
              )
            )
          ]
        )
      )
    ]
  );
}

方案2：手动偏移调整 #

如果需要快速调试效果，也可以通过Transform.translate给图片增加向下的偏移量，数值根据实际显示效果微调即可：

static Widget _buildLogo() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
      SizedBox(width: 15.0),
      Transform.translate(
        // 偏移数值可根据实际视觉效果调整，当前场景设置4~6即可接近预期效果
        offset: Offset(0, 5),
        child: Image.asset("assets/images/header-logo-red_256_solid.png", height: 20),
      ),
      SizedBox(width: 10.0),
      Text('Text',
        style: TextStyle(
          fontSize: 28.0,
          backgroundColor: Colors.green
        )
      ),
    ]
  );
}

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