微信交流群

老孟公众号

# 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。

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


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 {
  
  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

效果如下:

middletrailing分别表示中间和末尾的控件,用法如下:

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

image-20200526181202030