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 用来指定背景色,可以直接传颜色值

    iconThemeactionIconTheme 都可以指定 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(),
          ),
        );
      }
    }

    最终结果:

    19030-17kvvhjgh8f.png

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

    完整代码链接: