Flutter – AppBar小部件

Flutter是一款可快速开发高品质、高性能、类原生应用程序的移动应用程序开发框架。而AppBar小部件则是其中一个核心组件，它通常作为页面顶部的导航栏出现。

AppBar小部件的特点

• 支持自定义导航栏的图标和标题；
• 支持向导航栏添加菜单和动作按钮；
• 支持在导航栏底部添加选项卡（tab）。

AppBar小部件的属性

leading

• 类型：Widget
• 默认值：null

在导航栏左侧显示的控件，通常是返回按钮或菜单按钮。

title

• 类型：Widget
• 默认值：null

导航栏中间显示的标题控件。

actions

• 类型：List
• 默认值：null

在导航栏右侧显示的动作按钮列表，可以添加多个按钮。

bottom

• 类型：PreferredSizeWidget
• 默认值：null

在导航栏底部添加选项卡（tab）的控件。

使用AppBar小部件

基本用法

在Flutter中，可以在Scaffold中使用AppBar小部件，如下所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AppBar'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

在上面的示例中，我们创建了一个简单的Scaffold，并在其中添加了一个AppBar小部件，其中title属性设置为字符串Flutter AppBar。在body属性中，我们使用Center小部件将一段文本居中显示。

添加图标和菜单

如果要在导航栏左侧或右侧添加图标或菜单按钮，可以使用IconButton或PopupMenuButton小部件。在下面的示例中，我们在导航栏右侧添加了一个菜单按钮，用于展示一个下拉菜单：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AppBar'),
          actions: [
            PopupMenuButton<String>(
              itemBuilder: (BuildContext context) {
                return [
                  PopupMenuItem(
                    value: 'item1',
                    child: Text('菜单项1'),
                  ),
                  PopupMenuItem(
                    value: 'item2',
                    child: Text('菜单项2'),
                  ),
                ];
              },
              onSelected: (String value) {
                print('点击了$value');
              },
            ),
          ],
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

在上面的示例中，我们使用了PopupMenuButton小部件，在菜单项列表中添加了两个选项。当用户点击菜单项时，会触发onSelected回调函数。

添加选项卡

如果要在导航栏底部添加选项卡，我们可以使用TabBar和TabBarView小部件。下面是一个简单的示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AppBar'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.settings)),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Center(child: Text('Home')),
            Center(child: Text('Settings')),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个有两个选项卡的TabBar，并将其添加到了导航栏的底部。我们还创建了一个TabBarView，其中包含与选项卡对应的两个小部件，用于显示不同的内容。在初始化时，我们使用TabController来管理选项卡的状态。