带有图像抖动的 AppBar 标题

Question

我有附加的 AppBar，我想在标题旁边添加一个图像，而不是动作图标，只有图像，我该如何处理？

appBar: AppBar(
            title: Text('Title'),
            actions: <Widget>[
              new IconButton(
                icon: new Icon(Icons.refresh),
                onPressed: () {
                  setState(
                    () {
                      widget.athkarCategory.reset();
                    },
                  );
                },
              ),
            ],
          ),

Answer 1

AppBar的title属性接受一个Widget，表示任意组合。

因此，例如，如果您想要标题旁边的图像，您只需将其包装在 Row 小部件中，然后在 Text 旁边添加 Image，这将包含您的标题。

这里是您要完成的代码示例：https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b

相关代码部分是这样的：

      appBar: AppBar(
        title: Row(
          children: <Widget>[
            Text(widget.title),
            Image.network("https://i.ytimg.com/vi/Uk1RPEQI8mI/maxresdefault.jpg", width: 50, height:50)
          ],
        ),
      ),

Answer 2

AppBar 标题需要一个小部件。因此，您可以按照自己的方式自定义应用栏标题。

示例：

AppBar(
        title: Container(
          child: Row(
            children: <Widget>[
              Text('Title With Image'),
              Icon(Icons.refresh),
            ],
          ),
        ),
      )

Answer 3

你可以使用这个：

AppBar(
    leading: IconButton(
      icon: Icon(
        Icons.arrow_back,
        color: Color(0xff6D6E70),
      ),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
    title: Row(children: <Widget> [
          Text(
      "Title".toUpperCase(),
      style: TextStyle(
        color: Color(0xff6D6E70),
      ),
    ),
      Icon(Icons.save),
    ]),
    actions: <Widget>[
      Center(
        child: Wrap(
          spacing: 4,
          children: <Widget>[
            Icon(
             Icons.satellite, //Refresh Icon
            ),
            Container(
              padding: const EdgeInsets.only(right: 10),
              margin: const EdgeInsets.only(top: 2.5),
              child: Text(
                "25",
              ),
            ) //This container is to add further text like showing an icon and then showing test
          ],
        ),
      )
    ],
  ),

Answer 4

您也可以使用leading

     AppBar(leading: IconButton(
         icon: Icon(Icons.arrow_back_ios),
         iconSize: 20.0,
         onPressed: () { 
            //you can call a function here
                      }),
                    centerTitle: true,
                    title: Text("Your title"),)

带有图像抖动的 AppBar 标题

AppBar title with image flutter

appbar

dart

flutter