在 Flutter 的基线上将图像与 Flutter 中的文本对齐答案

【问题标题】：Align image next to text in flutter on base line in Flutter在 Flutter 的基线上将图像与 Flutter 中的文本对齐
【发布时间】：2021-12-04 19:08:15
【问题描述】：

我在将徽标放置在某些文本旁边并正确垂直对齐时遇到了问题。徽标 png 的 PNG 尺寸约为 750x256。我希望它与旁边文本中的大写字母大小相同。因此，我将字体大小设置为 28，图像高度设置为 20。我假设通过将其放入具有交叉轴对齐基线的行中，图像应该放在基线上，但它放在顶部。

这是我的代码：

static Widget _buildLogo() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
      SizedBox(width: 15.0),
      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
        )
      ),
    ]
  );
}

这就是它的外观：

我希望它是这样的（我添加了一行来表示字母基线）：

编辑：快速解释：我想要实现的是您将在以下代码 sn-p 中获得的默认 HTML 行为？

<html>
<body>
<img src="logo.png" /><font size=200>laBlaBla</font>
</body>
</html>

【问题讨论】：

我不确定您是否可以将图像作为孩子来执行此操作。根据docs：Children who report no baseline will be top-aligned.。而且您的图像似乎没有报告。
你可以使用CrossAxisAlignment.center。

标签： flutter dart baseline

【解决方案1】：

我终于找到了解决办法。

使用 Row 时，不更改 RenderingBox 是不可能的，但使用 RichText 是可能的。秘诀是使用正确的基线/对齐方式。

    RichText(
      text: TextSpan(
        children: [
          WidgetSpan(child: Image.asset("assets/images/logo.png"), baseline: TextBaseline.alphabetic, alignment: PlaceholderAlignment.baseline),
          TextSpan(text: "laBlaBla", style: TextStyle(fontSize: 48),)
        ]
      )
    ),

编辑：但请注意，此解决方案也并不总是按预期工作。

【讨论】：