如何在 AppBar 中用图像替换标题答案

【问题标题】：How to replace title with image in AppBar如何在 AppBar 中用图像替换标题
【发布时间】：2018-04-23 14:47:34
【问题描述】：

如何在 Flutter 中将 AppBar 标题替换为图片徽标？

【问题讨论】：

【解决方案1】：

title 属性采用 Widget，因此您可以将任何小部件传递给它。

例如，添加到资产中的图像

Scaffold(
  appBar: AppBar(
    title: Image.asset('assets/title.png', fit: BoxFit.cover),
  ),
  body: ...
)

More info

【讨论】：

这是一个很好的答案。我想补充一点，使图像成为最终图像对我来说是有意义的：final Image titleImage = Image.asset(...) 如果图像不是最终图像，它将导致比简单的Text 小部件更多的重建。
嘿@rgisi！您可以添加一个链接来澄清它吗？我不知道构建实际上是如何工作的，很高兴知道为什么制作Image final 会跳过一些重建。非常感谢！

【解决方案2】：

  appBar: AppBar(
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Image.asset(
                 'assets/logo.png',
                  fit: BoxFit.contain,
                  height: 32,
              ),
              Container(
                  padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
            ],

          ),
  )

【讨论】：

谢谢，但是如何增加徽标大小？似乎它被限制在大约 60
必须增加参数height，即height:XX,
如果你想要一个更高的AppBar你需要将参数更改为AppBar appBar：PreferredSize(preferredSize:Size.fromHeight(50.0),
谢谢！但是如果我需要让它灵活只依赖孩子的身高呢？默认情况下，appBar 的高度是恒定的（即使使用 preferredSize 参数），它会剪切里面的所有东西。所以我只需要操纵孩子的高度，而不是 appBar 的高度和孩子的高度。
但是，如果您仍然需要应用栏顶部的后退按钮，并且您使用的是 PreferredSize 而不是 AppBar，该怎么办？

【解决方案3】：

应用主题可能是最好的长期方案。（确保您已将徽标图像正确添加到资产文件夹并更新了“pubspec.yaml”文件）。

在您的 /lib 路径中创建一个文件夹（例如“主题”）。
在该文件夹中创建一个“样式”文件（例如“style.dart”）。（也可以使用此文件为您的应用实现不同的主题：颜色、字体等）

在您的“样式”文件中创建图像widget，例如（高度、重量、路径、对齐方式由您决定）：

Image appLogo = new Image(
image: new ExactAssetImage("assets/images/AppLogo.png"),
height: 28.0,
width: 20.0,
alignment: FractionalOffset.center);

在 AppBar 的 title 字段中，添加“appLogo”（或任何您命名为widget），像这样（不要忘记导入你的'style'文件）：
```
child: Scaffold(
appBar: AppBar(
  title: appLogo,        
),
```
现在，如果您需要更改此徽标，您只需使用新的图像路径编辑您的 style.dart 文件即可。如果您有不同的主题并在每个样式文件中以相同的方式命名小部件，您还可以通过导入相应的样式快速实现不同的样式（例如“style1”、“style2”等）文件只放在几个地方。

【讨论】：

【解决方案4】：

问题是 AppBar 不适合它的高度与图像大小。为了解决这个问题，我设置了图像和 AppBar 高度（包括填充）

这是我的代码：

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Image.asset(
      "assets/images/logo_light.png",
      fit: BoxFit.contain,
      height: 72,
    ),
    toolbarHeight: 88,
    actions: [
      IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
    ],
  ),
);

【讨论】：

【解决方案5】：

以上对我来说不太适用，这会将我想要的图片背景添加到整个应用栏，并留下保留标题的选项。针对颤振/飞镖 2.0 空安全性进行了更新

Scaffold(
            backgroundColor: Colors.black,
            appBar: AppBar(
              title: Text('App Bar!'),
              flexibleSpace: Image(
                image: AssetImage('images/bar1.jpg'),
                fit: BoxFit.cover,
              ),
              backgroundColor: Colors.transparent,
            ),
body: Container()

)

【讨论】：

【解决方案6】：

AppBar(
  centerTitle: true,
  title: Image.asset('assets/your_logo.png', height: 32),
  backgroundColor: Theme.of(context).primaryColor,
)

【讨论】：