1. 基本介紹

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

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,
    );
  }
}

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,
    );
  }

5. 技術小結

CupertinoNavigationBar 屬性稍微多一點，但是不難理解，備註的很詳細，可以自行改動嘗試理解各個屬性。