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