带有图像抖动的应用栏标题

Question

我有附加的Appear，我想直接在标题旁边添加图像，而不是在操作图标旁边添加图像，仅在图像旁边，如何处理？

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

Answer 1

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

示例：

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

Answer 2

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

例如，如果您想在标题旁边添加图片，您可以将其包装在Row小部件中，然后将Image添加到包含标题的Text旁边。

下面是您要完成的代码示例：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 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
          ],
        ),
      )
    ],
  ),