flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）

AppBar(
  leading: Icon(Icons.home),    // 导航图标
  title: Text('AppBar Title'),    // 页面标题
  actions: <Widget>[            // 顶部菜单
    IconButton(
   onPressed: () {},
      icon: Icon(Icons.build),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.add),
    )
  ],
)

// 混入SingleTickerProviderStateMixin
class _AppBarSampleState extends State<AppBarSample>
    with SingleTickerProviderStateMixin {

  // 存放各个可选项的数组
  List<Item> items = const <Item>[
    const Item(title: 'Item1', icon: Icons.directions_car),
    const Item(title: 'Item2', icon: Icons.directions_bike),
    const Item(title: 'Item3', icon: Icons.directions_boat),
    const Item(title: 'Item4', icon: Icons.directions_walk),
  ];

  // 创建切换控制器
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _tabController = TabController(length: items.length, vsync: this);
  }

  @override
  void dispose() {
    // 释放资源
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 顶部菜单栏
      appBar: AppBar(
          // ...
          bottom: TabBar(
            // 选项可滚动
              isScrollable: true,
            // 为TabBar配置控制器
            controller: _tabController,
            tabs: items.map((Item item) {
              // 根据数据返回Tab组件
              return Tab(
                text: item.title,
                icon: Icon(item.icon),
              );
            }).toList(),
          )
     ),
        body: Center(
          child: Text('body'),
        ),
    );
  }
}

Scaffold(
  // 顶部菜单栏
  appBar: AppBar(
    // ...
    bottom: TabBar(
      controller: _tabController,
      tabs: items.map((Item item) {
        return Tab(
          text: item.title,
          icon: Icon(item.icon),
        );
      }).toList(),
    )),
  // Scaffold中的主体布局
  body: TabBarView(
    // 为TabBarView配置与TabBar相同的控制器
    controller: _tabController,
    children: items.map((Item item) {
      // 返回选中相应选项时主体中显示的组件
      return Center(
        child: Text(item.title, style: TextStyle(fontSize: 20.0),),
      );
    }).toList(),
  ),
)

class _DrawerSampleState extends State<DrawerSample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawer Demo'),
      ),
      drawer: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text(
              '菜单头部',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.message),
            title: Text('消息'),
          ),
          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('我的'),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }
}

Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
    title: const Text('Drawer Demo'),
  ),
  drawer: MyDrawer(),
)

AppBar(
  leading: Icon(Icons.home),    // 导航图标
  ……
)