Flutter入门（50）：Flutter 组件之 CupertinoNavigationBar 详解

1. 基本介绍

CupertinoNavigationBar 是 Flutter 提供的 iOS 风格的 NavigationBar。

CupertinoNavigationBar.png

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

CupertinoNavigationBar 属性	介绍
leading	左侧组件
automaticallyImplyLeading	是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
automaticallyImplyMiddle	是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
previousPageTitle	当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
middle	中间标题组件
trailing	右侧组件
border	边框，默认为 _kDefaultNavBarBorder
backgroundColor	背景色
brightness	上方电量，事件，Wifi 等状态栏颜色
padding	内边距，用来调节所有子组件上下左右偏移
actionsForegroundColor	leading 和 trailing 的默认颜色
transitionBetweenRoutes	默认为 true
heroTag	默认为 _defaultHeroTag

PS：作为一个很多年的 iOS 开发了，暂时还没搞明白 transitionBetweenRoutes 和 heroTag 怎么使用，后续再做补充吧。

  /// {@template flutter.cupertino.navBar.transitionBetweenRoutes}
  /// Whether to transition between navigation bars.
  ///
  /// When [transitionBetweenRoutes] is true, this navigation bar will transition
  /// on top of the routes instead of inside it if the route being transitioned
  /// to also has a [CupertinoNavigationBar] or a [CupertinoSliverNavigationBar]
  /// with [transitionBetweenRoutes] set to true.
  ///
  /// This transition will also occur on edge back swipe gestures like on iOS
  /// but only if the previous page below has `maintainState` set to true on the
  /// [PageRoute].
  ///
  /// When set to true, only one navigation bar can be present per route unless
  /// [heroTag] is also set.
  ///
  /// This value defaults to true and cannot be null.
  /// {@endtemplate}
  final bool transitionBetweenRoutes;

  /// {@template flutter.cupertino.navBar.heroTag}
  /// Tag for the navigation bar's Hero widget if [transitionBetweenRoutes] is true.
  ///
  /// Defaults to a common tag between all [CupertinoNavigationBar] and
  /// [CupertinoSliverNavigationBar] instances of the same [Navigator]. With the
  /// default tag, all navigation bars of the same navigator can transition
  /// between each other as long as there's only one navigation bar per route.
  ///
  /// This [heroTag] can be overridden to manually handle having multiple
  /// navigation bars per route or to transition between multiple
  /// [Navigator]s.
  ///
  /// Cannot be null. To disable Hero transitions for this navigation bar,
  /// set [transitionBetweenRoutes] to false.
  /// {@endtemplate}
  final Object heroTag;

4. CupertinoNavigationBar 详解

4.1 示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FMCupertinoNavigationBarVC extends StatefulWidget{
  @override
  FMCupertinoNavigationBarState createState() => FMCupertinoNavigationBarState();
}

class FMCupertinoNavigationBarState extends State  {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: _cupertinoNavigationBar(),
      child: SafeArea(child: Center()),
    );
  }
  
  CupertinoNavigationBar _cupertinoNavigationBar(){
    return CupertinoNavigationBar(
      leading: Icon(Icons.arrow_back), // 左侧组件
      automaticallyImplyLeading: true, // 是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
      automaticallyImplyMiddle: true, // 是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
      previousPageTitle: "back", // 当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
      middle: Text("FMCupertinoNavigationBar"), // 中间标题组件
      trailing: Icon(Icons.add), // 右侧组件
      // 边框
      border: Border(
        bottom: BorderSide(
          color: Colors.red,
          width: 1
        ),
      ),
      backgroundColor: Colors.blue.shade100, // 背景色
      brightness: Brightness.light, // 上方电量，事件，Wifi 等状态栏颜色
      // 内边距，用来调节所有子组件上下左右偏移
      padding: EdgeInsetsDirectional.only(
        start: 15,
        bottom: 0,
        end: 15
      ),
      // leading 和 trailing 的默认颜色
      actionsForegroundColor: Colors.red,
    );
  }
}

CupertinoNavigationBar.png

4.2 左侧默认填充

我们注释掉 leading

  CupertinoNavigationBar _cupertinoNavigationBar(){
    return CupertinoNavigationBar(
      // leading: Icon(Icons.arrow_back), // 左侧组件
      automaticallyImplyLeading: true, // 是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
      automaticallyImplyMiddle: true, // 是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
      previousPageTitle: "back", // 当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
      middle: Text("FMCupertinoNavigationBar"), // 中间标题组件
      trailing: Icon(Icons.add), // 右侧组件
      // 边框
      border: Border(
        bottom: BorderSide(
          color: Colors.red,
          width: 1
        ),
      ),
      backgroundColor: Colors.blue.shade100, // 背景色
      brightness: Brightness.light, // 上方电量，事件，Wifi 等状态栏颜色
      // 内边距，用来调节所有子组件上下左右偏移
      padding: EdgeInsetsDirectional.only(
        start: 15,
        bottom: 0,
        end: 15
      ),
      // leading 和 trailing 的默认颜色
      actionsForegroundColor: Colors.red,
    );
  }

CupertinoNavigationBar autoleading.png

5. 技术小结

CupertinoNavigationBar 属性稍微多一点，但是不难理解，备注的很详细，可以自行改动尝试理解各个属性。