在 Flutter 的基线上对齐文本旁边的图像

Question

我在将徽标放置在某些文本旁边并正确垂直对齐时遇到问题。徽标 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
        )
      ),
    ]
  );
}

这是它的样子：

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

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

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

Answer 1

我终于找到了解决办法。

使用 Row 不更改 RenderingBox 是不可能的，但是使用 RichText 是可能的。秘诀是使用正确的 baseline/alignment.

    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),)
        ]
      )
    ),

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

在 Flutter 的基线上对齐文本旁边的图像

Align image next to text in flutter on base line in Flutter

baseline

dart

flutter