在顫振的基線上將圖像與顫振中的文本旁邊對齊

Question

我在某些文本旁邊放置徽標並正確垂直對齊時遇到問題。 logo 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 是可能的。 秘訣是使用正確的基線/對齊方式。

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

編輯：雖然有點謹慎，但這個解決方案也並不總是按預期工作。

在顫振的基線上將圖像與顫振中的文本旁邊對齊

問題描述

1 個解決方案

解決方案1
0 已采納 2021-12-06 13:58:23

在顫振的基線上將圖像與顫振中的文本旁邊對齊

問題描述

1 個解決方案

解決方案1 0 已采納 2021-12-06 13:58:23

解決方案1
0 已采納 2021-12-06 13:58:23