Question

我是Flutter的新用户。如何在Flutter中用图像徽标替换标题？

由于

Answer 1

title属性需要Widget，因此您可以传递任何内容。

例如添加到资产的图像

 title: new Image.asset('assets/title.png', fit: BoxFit.cover)

另见https://flutter.io/assets-and-images/

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

          ),
  )

Answer 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);

在title的{{1}}字段中，添加“ appLogo”（或任何命名为AppBar），如下所示（不要忘记导入“样式”文件）：
```
widget
```
现在，如果您需要更改此徽标，则只需要使用新的图像路径来编辑style.dart文件即可。而且，如果您有不同的主题，并且在每个样式文件中以相同的方式命名小部件，则只需导入相应的样式，即可快速快速实现不同的样式（例如“ style1”，“ style2”等）。文件放在几个地方。

Answer 4

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

          ),
  )

Answer 5

问题是 AppBar 不适合它的 Height 与图像大小。为了解决这个问题，我设置了图像和 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)),
    ],
  ),
);

如何在appBar Flutter中用图像替换标题

5 个答案: