CupertinoNavigationBar CupertinoSliverNavigationBar | Flutter

微信交流群

老孟公众号

# CupertinoNavigationBar

ios风格的导航条，对应Material风格的AppBar，用法如下：

CupertinoNavigationBar(
  middle: Text('老孟'),
)

1
2
3

middle表示中间的控件，效果如下：

导航条左边的控件：

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    leading: Icon(Icons.arrow_back),
    middle: Text('老孟'),
  ),
  child: FirstPage(),
)

1
2
3
4
5
6
7

效果如下：

leading为null而且automaticallyImplyLeading设置true(默认就是true)

在fullscreenDialog上显示一个“关闭”图标。
如果previousPageTitle不为null，显示一个“返回”图标+previousPageTitle的值。
如果当前路由和前一个路由都是CupertinoPageRoute类型，显示“返回”图标+上一个路由的title。

第二张情况的第一个页面：

@override
Widget build(BuildContext context) {
  return Center(
    child: RaisedButton(
      child: Text('去下一个页面'),
      onPressed: () {
        Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
          return SecondPage();
        });
      },
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13

第二个页面：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        previousPageTitle: '返回',
        middle: Text('老孟'),
      ),
      child: Center(
        child: RaisedButton(
          child: Text('to third'),
          onPressed: () {
            Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
              return ThirdPage();
            }));
          },
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：

middle和trailing分别表示中间和末尾的控件，用法如下：

CupertinoNavigationBar(
  middle: Text('老孟'),
  trailing: Icon(Icons.timer),
)

1
2
3
4

设置背景颜色和padding：

CupertinoNavigationBar(
  middle: Text('老孟'),
  backgroundColor: Colors.red,
  padding: EdgeInsetsDirectional.only(start: 10),
)

1
2
3
4
5

# CupertinoSliverNavigationBar

CupertinoSliverNavigationBar的属性CupertinoNavigationBar基本一样，比CupertinoNavigationBar多了一个largeTitle属性，而且CupertinoSliverNavigationBar是Sliver控件，通常用于CustomScrollView中。

CustomScrollView(
  slivers: <Widget>[
    CupertinoSliverNavigationBar(
      largeTitle: Text('老孟'),
    ),
  ],
)

1
2
3
4
5
6
7

CupertinoFullscreenDialogTransition CupertinoNavigationBarBackButton