Flutter 使用 MaterialApp 构造整个应用的话，可以使用 Scalfold 作为页面的结构

而 Scalfold 页面结构中，头部导航通过 appBar 指定值是 AppBar Widget 即可

AppBar 的构造函数如下：

  AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })

一般我们都是指定 title 来指定导航栏的标题，除此之外可以自定义一些导航栏按钮等操作

centerTitle 属性能够指定所有的标题都会居中，默认情况下，文字标题 title 属性在 ios 上是居中的，而在 android 上不是居中的，靠近左边

leading 能够指定左侧的图标按钮，在某些首页或者 tab 情况下，因此不需要返回，可能唤起一个 Drawer，一般会在导航左侧加一个图标，点击唤起 drawer

actions 用来在导航左侧添加一系列的按钮或者文字，定义如下：

  /// Widgets to display after the [title] widget.
  ///
  /// Typically these widgets are [IconButton]s representing common operations.
  /// For less common operations, consider using a [PopupMenuButton] as the
  /// last action.
  final List<Widget> actions;

actions 接收一个 List<Widget> 数据，理论上什么类型的 Widget 都可以塞进去

evaluation 是导航栏底部的阴影，在 material design 中，是建议留着的，如果指定 0 就可以不显示阴影。

backgroundColor 用来指定背景色，可以直接传颜色值

iconTheme 和 actionIconTheme 都可以指定 themedata 不需要单个 icon 去指定颜色等

自定义 AppBar 通过上面几个属性即可控制，比如：

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义 AppBar'),
          centerTitle: true,
          backgroundColor: Colors.pink,
          leading: IconButton(
            icon: Icon(Icons.home),
            onPressed: () {
              print('home app bar');
            },
          ),
          elevation: 0,
          actions: <Widget>[
            Center(
              child: Text('所有订单'),
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              onPressed: () {},
            ),
          ],
        ),
        body: HomeContent(),
      ),
    );
  }
}

最终结果：

【所有订单】与后面的三个点儿iconButton 都属于 actions，一般考虑适配和显示，都只设置最多两 3个 actions button

完整代码链接：

• https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.30-%E8%87%AA%E5%AE%9A%E4%B9%89AppBar.dart