Flutter 之 CupertinoNavigationBar

CupertinoNavigationBar 是 Flutter 提供的 iOS 风格的 NavigationBar

1. CupertinoNavigationBar

CupertinoNavigationBar 定义

  const CupertinoNavigationBar({
    Key? key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.automaticallyImplyMiddle = true,
    this.previousPageTitle,
    this.middle,
    this.trailing,
    this.border = _kDefaultNavBarBorder,
    this.backgroundColor,
    this.brightness,
    this.padding,
    this.transitionBetweenRoutes = true,
    this.heroTag = _defaultHeroTag,
  })

属性介绍

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	内边距，用来调节所有子组件上下左右偏移
transitionBetweenRoutes	默认为 true
heroTag	默认为 _defaultHeroTag

2. 示例

class MSCupertinoNavigationBarDemo1 extends StatelessWidget {
  const MSCupertinoNavigationBarDemo1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        leading: Icon(Icons.dashboard), // 左侧组件
        automaticallyImplyLeading:
            true, // 是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
        previousPageTitle:
            "返回", // 当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
        automaticallyImplyMiddle:
            true, // 是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
        middle: Text("CupertinoNavigationBarDemo"), // 中间标题组件
        trailing: Icon(Icons.share), // 右侧组件
        border: Border.all(color: Colors.amber, width: 2.0), // 边框
        backgroundColor: Colors.cyan[200],
        brightness: Brightness.light, // Brightness.dark Brightness.light
        padding: EdgeInsetsDirectional.all(8.0), // 内边距，用来调节所有子组件上下左右偏移
        // transitionBetweenRoutes: false,
        // heroTag: "AAA",
      ),
      child: Container(),
    );
  }
}

image.png

示例2

...
Navigator.of(context).push(
  CupertinoPageRoute(
    builder: (ctx) {
      return MSCupertinoNavigationBarDemo2();
    },
    title: "HaHa",
  ),
);
...

class MSCupertinoNavigationBarDemo2 extends StatelessWidget {
  const MSCupertinoNavigationBarDemo2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        automaticallyImplyLeading: true,
        previousPageTitle: "back",
        automaticallyImplyMiddle: true,
      ),
      child: Container(),
    );
  }
}

MSCupertinoNavigationBarDemo2 是上一个页面通过push 一个CupertinoPageRoute而来

93.gif

注意：

IconButton 不能作为 CupertinoPageScaffold 的child。会报错
这是由于IconButton 需要一个material Widget作为它的祖先。可以使用CupertinoButton 或者 给IconButton包裹一个Card、Dialog、Drawer、Scaffold