如何在Flutter中向AppBar添加图标

Question

如果我有一个像这样的AppBar：

我该如何添加一个可点击的图标，让它变成这样？

- Suragch

---

可能是Flutter中如何在AppBar中实现可点击的文本的重复问题。 - Shababb Karim

无所谓，原理相同。您可以将图标包装在平面按钮或InkWell中，效果相同。我认为在类似的资源中，关于如何使操作在Appbar中可点击，缺乏寻找资源和实验的努力。 - Shababb Karim

“actions” 是一个小部件列表 - 不管您放入什么小部件 - 图标或文本。 - Andrii Turkovskyi

Answer 1

通过将IconButton小部件添加到AppBar的actions列表中，可以为AppBar添加图标。

AppBar(
  title: Text('My App'),
  actions: <Widget>[
    IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
      ),
      onPressed: () {
        // do something
      },
    )
  ],
),

参见

• AppBar基础文档
• 如何在Flutter的AppBar中添加可点击的文本

- Suragch

---

如果你想要图标在左边呢？ - Antonin GAVREL

@AntoninGAVREL，您可以使用AppBar的leading参数在左侧添加一个小部件（包括图标）。 - Suragch

Answer 2

使用leading设置左侧图标，使用actions设置右侧操作。

AppBar(
  centerTitle: true,
  title: Text('AppBar'),
  leading: IconButton(
    onPressed: () {},
    icon: Icon(Icons.home),
  ),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.call),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.more_vert),
    ),
  ],
)

- iDecode

---

领先图标不可见。 - Bora Keçeci

@BoraKeçeci 请通过Dartpad分享最小可复现代码。 - iDecode