如何在 Appbar 上制作一些具有不同对齐方式的图标？答案

【问题标题】：How to make some icons at Appbar with different alignment?如何在 Appbar 上制作一些具有不同对齐方式的图标？
【发布时间】：2019-08-20 04:58:59
【问题描述】：

我遇到了一些问题。我想在AppBar 中制作一个图像、一个文本和两个图标，但我无法让它按我的意愿工作。

我尝试在图像和文本之后连续制作一些字体。图片和文字成功显示在我的AppBar 中，但其余 2 种字体（手推车和通知）显示一些错误。

Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.amber,  
      appBar: new AppBar
        (
        title: new Row
          (
          mainAxisAlignment: MainAxisAlignment.start,
            children:
            [
              Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), 
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
            ],
          )

        ),

....

【问题讨论】：

标签： flutter android-appbarlayout flutter-appbar

【解决方案1】：

使用leading 在appBar 标题之前设置一个小部件，并使用actions 指定appBar 中出现在appBar 标题右侧的小部件列表。

AppBar(
    leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
    title: Text ("Your Title"),
    actions: [
        Icon(Icons.add),
        Icon(Icons.add),
    ],
);

阅读更多关于它的信息here

【讨论】：

【解决方案2】：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Solid Shop"),
      leading: Image.asset("your_image_asset"),
      actions: <Widget>[
        IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
        IconButton(icon: Icon(Icons.message), onPressed: () {}),
      ],
    ),
  );
}

【讨论】：

【解决方案3】：

您需要使用actions 而不是title

actions: <Widget>[
          Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), 
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),

          Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
              Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
        ],

【讨论】：

非常感谢@Taym 先生的回答。我已经尝试了你的建议，它对我有用。但是发生了一些小错误。可能是我放的图片太大造成的。它看起来不太好。但我会尝试如何让它看起来不错:)

【解决方案4】：

您可以在应用栏上添加图标和图片，此代码适用于我：-

appBar: AppBar(

    centerTitle: true,

    elevation: 2,

    title: Center(

      child: Row(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Image.asset(

            "assets/images/bell.png",

            fit: BoxFit.contain,

            height: 28,

          ),

          Container(

            child: Text("  APP BAR"),

          )

        ],

      ),

    ),

    actions: [

      IconButton(

        icon: Icon(Icons.settings),

        onPressed: () {

          Navigator.push(

            context,

            MaterialPageRoute(

              builder: (context) {

                return Settings();

              },

            ),

          );

        },

        color: Colors.white,
      )

    ],

  ),

希望这对您有所帮助。

【讨论】：