如何在应用栏中制作具有不同对齐方式的一些图标？

Question

我遇到了一些问题。我想在AppBar中放置一张图片、一个文本和两个图标，但我无法按照我想要的方式实现它。

我尝试让一些字体在图片和文本之后排成一行。图片和文本成功显示在我的AppBar中，但是另外两个字体（Trolley和notifications）出现了一些错误。

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

        ),

....

- Roman Traversine

---

你可以使用间隔符进行组合。 - jNayden

Answer 1

使用leading属性在AppBar标题之前设置一个小部件，使用actions属性指定一系列小部件在AppBar标题右侧显示。

使用leading以设置小部件在AppBar标题前，使用actions以指定列表小部件在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),
    ],
);

阅读更多相关信息，请点击这里

- Tirth Patel

Answer 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: () {}),
      ],
    ),
  );
}

- CopsOnRoad

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

- Taym95

---

非常感谢@Taym先生的回答。我尝试了您的建议，它对我很有效。 但是出现了一些小问题。 可能是因为我放置了太大的图片.. 它看起来不太好。但我会尝试如何使它看起来好 :) - Roman Traversine

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

    ],

  ),

希望这对你有所帮助。

- arslan-thelogicbreaker

Answer 5

您可以将其与间隔符组合使用：

 actions: const [
                Spacer(flex: 3),
                Icon(Icons.fit_screen),
                Spacer(flex: 10),
                Icon(Icons.width_normal),
                Spacer(flex: 1),
                Icon(Icons.aspect_ratio),
                Spacer(flex: 1),
                Icon(Icons.ad_units),
                Spacer(flex: 5),
              ],

- jNayden

Answer 6

appBar: AppBar(
    leading: Image.asset("assets/print.png"),
    backgroundColor: Colors.blue,
    actions: const [
      Icon(Icons.ac_unit_outlined),
      Icon(Icons.ac_unit_outlined),
    ],
    title: const Center(child: Text('Page Three')),
  ),

- jesmin

---

感谢您对Stack Overflow社区做出贡献的兴趣。这个问题已经有很多答案了，其中一个答案已经得到社区的广泛验证。您确定您的方法之前没有被提到过吗？如果是这样的话，能否请您解释一下您的方法有何不同，什么情况下您的方法可能更好，并且为什么您认为之前的答案不够满意。您能否请编辑您的答案并提供一个解释呢？ - undefined