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

Question

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

谢谢

Answer 1

title属性需要a title,因此您可以传递任何内容.

例如,添加到资产的图像

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

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

Answer 2

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

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

3. widget在您的“样式”文件中创建一个图像，例如（高度、重量、路径、与您对齐）：

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

4. 在title您的字段中AppBar，添加“appLogo”（或您命名的任何名称widget），如下所示（不要忘记导入您的“样式”文件）：

   child: Scaffold(
   appBar: AppBar(
     title: appLogo,        
   ),
   

5. 现在，如果您需要更改此徽标，只需使用新的图像路径编辑 style.dart 文件即可。如果您有不同的主题并在每个样式文件中以相同的方式命名您的小部件，您还可以通过导入相应的样式来快速实现不同的样式（例如“style1”、“style2”等）文件只在几个地方。

Answer 3

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

          ),
  )