Flutter AppBar Icon - Dart

在Flutter中，AppBar是一个重要的界面元素，通常作为一个应用程序的顶部导航栏。AppBar通常包含一个标题、可选的操作按钮以及一些图标，这些图标可以用来触发各种操作。

在本文中，我将向您介绍如何使用Dart编程语言来添加AppBar图标。下面是详细的介绍：

添加AppBar图标

要添加AppBar图标，首先需要将AppBar包装在Scaffold小部件中。然后，可以将AppBar的leading属性设置为一个IconButton小部件，这个小部件将显示在标题前面，并显示一个图标。

Scaffold(
  appBar: AppBar(
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {
        // Do something
      },
    ),
    title: Text('My App'),
  ),
  body: MyBody(),
)

在上面的代码中，我们将AppBar的leading属性设置为一个IconButton，其中图标为“菜单”。当用户点击该图标时，将调用一个函数来执行某些操作。

添加更多图标

除了leading图标之外，还可以在AppBar中添加其他图标，例如Action图标和Overflow菜单。

例如，添加右侧的Action图标可以使用AppBar的actions属性，如下所示：

Scaffold(
  appBar: AppBar(
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          // Do something
        },
      )
    ],
    title: Text('My App'),
  ),
  body: MyBody(),
)

在上面的代码中，我们将AppBar的actions属性设置为一个包含一个IconButton小部件的列表，该IconButton将显示一个搜索图标。当用户点击该图标时，将调用一个函数来执行某些操作。

类似地，还可以添加Overflow菜单，该菜单包含其他操作，可以在AppBar中使用PopupMenuButton小部件来实现。

Scaffold(
  appBar: AppBar(
    actions: <Widget>[
      PopupMenuButton(
        itemBuilder: (BuildContext context) {
          return <PopupMenuItem>[
            PopupMenuItem(
              child: Text('Option 1'),
              value: 'Option 1',
            ),
            PopupMenuItem(
              child: Text('Option 2'),
              value: 'Option 2',
            ),
            PopupMenuItem(
              child: Text('Option 3'),
              value: 'Option 3',
            ),
          ];
        },
        icon: Icon(Icons.more_vert),
        onSelected: (value) {
          // Do something
        },
      )
    ],
    title: Text('My App'),
  ),
  body: MyBody(),
)

在上面的代码中，我们将AppBar的actions属性设置为一个包含一个PopupMenuButton小部件的列表，该小部件将显示一个垂直点菜单图标。当用户点击该图标时，将显示一个弹出菜单，其中包含“Option 1”、“Option 2”和“Option 3”三个选项。当用户选择一个选项时，将调用一个函数来执行某些操作。

结论

在Flutter中添加AppBar图标是一个简单的过程，可以使用Dart编程语言实现。要添加AppBar图标，您需要将AppBar包装在Scaffold小部件中，然后使用leading、actions和PopupMenuButton等属性来添加不同的图标。

希望本文对您有所帮助！