我无法将 Logo 放置在某些文本旁边并正确垂直对齐。 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>
最佳答案
我终于找到了解决办法。
对于 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),)
]
)
),
编辑:不过要小心，这个解决方案也并不总是按预期工作。
关于flutter - 将 flutter 中的图像与文本对齐在 Flutter 的基线上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69604017/