
微信交流群
# CupertinoNavigationBar
ios风格的导航条,对应Material风格的AppBar,用法如下:
CupertinoNavigationBar(
middle: Text('老孟'),
)
1
2
3
2
3
middle
表示中间的控件,效果如下:
导航条左边的控件:
CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
leading: Icon(Icons.arrow_back),
middle: Text('老孟'),
),
child: FirstPage(),
)
1
2
3
4
5
6
7
2
3
4
5
6
7
效果如下:
leading
为null而且automaticallyImplyLeading
设置true(默认就是true)
- 在
fullscreenDialog
上显示一个“关闭”图标。 - 如果
previousPageTitle
不为null,显示一个“返回”图标+previousPageTitle
的值。 - 如果当前路由和前一个路由都是
CupertinoPageRoute
类型,显示“返回”图标+上一个路由的title。
第二张情况的第一个页面:
build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text('去下一个页面'),
onPressed: () {
Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
return SecondPage();
});
},
),
);
}
Widget
1
2
3
4
5
6
7
8
9
10
11
12
13
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
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
2
3
4
设置背景颜色和padding:
CupertinoNavigationBar(
middle: Text('老孟'),
backgroundColor: Colors.red,
padding: EdgeInsetsDirectional.only(start: 10),
)
1
2
3
4
5
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
2
3
4
5
6
7
版权所有,禁止私自转发、克隆网站。
CupertinoFullscreenDialogTransition CupertinoNavigationBarBackButton