（十）Scaffold之TabBar

Scaffold介绍

• 路由页都会包含一个导航栏，有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单
• Flutter Material库提供了一个Scaffold Widget，它是一个路由页的骨架，可以非常容易的拼装出包含上述组件的一个完整的页面
• TabBar
  • centerTitle: true
  • leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
  • automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
  • title,// 页面标题
  • actions, // 导航栏右侧菜单
  • bottom, // 导航栏底部菜单，通常为Tab按钮组
  • elevation // 导航栏阴影
  • centerTitle, //标题是否居中

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      // backgroundColor: Colors.orangeAccent,
      appBar: AppBar(
        leading: IconButton( // 标题左边区域
          icon: Icon(Icons.menu),
          tooltip: '导航',
          onPressed: () => debugPrint('导航事件'),
        ),
        actions: <Widget>[   // 标题右边区域 此处可以设置一组按钮
          IconButton(
            icon: Icon(Icons.search),
            tooltip: '搜索',
            onPressed: () => debugPrint('搜索事件'),
          ),
           IconButton(
             icon: Icon(Icons.more_horiz),
             tooltip: '其他',
             onPressed: () => debugPrint('其他事件'),
           )
        ],
        title: Text('AppBarTitle'),
        elevation: 5.0, // 阴影部分
      ),
      body: null,
    );
  }
}

运行图片