Flutter – AppBar 小部件

在Flutter中，一个AppBar小部件代表着应用程序中的顶部工具栏。AppBar通常包含一个应用程序的标题、操作和导航按钮。

创建一个AppBar

要创建一个AppBar，我们可以使用AppBar类。

AppBar(
  title: Text('我的应用程序'),
)

我们可以在AppBar中指定一个标题，如上例所示。

添加操作

AppBar可以包含一个或多个操作，可以在工具栏中以按钮形式呈现。要向AppBar添加操作，我们可以在leading、actions或者both参数中设置IconButton小部件。

AppBar(
  title: Text('我的应用程序'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

这将在AppBar的右侧放置两个操作按钮。

添加导航按钮

AppBar还可以包含一个导航按钮，通常呈现为一个返回箭头。要在AppBar中添加导航按钮，我们可以在leading参数中设置IconButton小部件。

AppBar(
  title: Text('我的应用程序'),
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {},
  ),
)

这将在AppBar的左侧放置一个导航按钮。

更多参数

除了上述参数，AppBar还有很多其他可用的参数，例如elevation（阴影），backgroundColor（背景色），brightness（明暗），以及自定义的iconTheme和textTheme等。可以根据应用程序的需要选择这些参数。

结论

AppBar是一个可定制的小部件，可以使用许多参数创建一个漂亮的顶部工具栏，包括操作和导航按钮。在构建Flutter应用程序时，AppBar尤为重要，因为它为用户提供了一个可见的导航和操作区域。