1. 基本介绍

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

CupertinoNavigationBar.png

2. 示例代码

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

3. 属性介绍

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 <FMCupertinoNavigationBarVC> {
  @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 属性稍微多一点，但是不难理解，备注的很详细，可以自行改动尝试理解各个属性。