
微信交流群
# CupertinoTabScaffold
CupertinoTabScaffold 提供了类似微信式的底部导航,用法如下:
build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('tab1')
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('tab2')
),
],
),
tabBuilder: (context,index){
return Center(
child: Text('$index'),
);
},
);
}
Widget
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果如下:

通过CupertinoTabController实现动态切换tab:
var _controller = CupertinoTabController();
Widget build(BuildContext context) {
return CupertinoTabScaffold(
controller: _controller,
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
],
),
tabBuilder: (context, index) {
return Center(
child: RaisedButton(
child: Text('切换$index'),
onPressed: () {
_controller.index = 1;
},
),
);
},
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
这时你会发现顶部没有导航啊,添加导航的方式是修改其tabBuilder方法:
tabBuilder: (context, index) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('老孟'),
),
child: Center(
child: RaisedButton(
child: Text('切换$index'),
onPressed: () {
_controller.index = 1;
},
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
效果如下:

版权所有,禁止私自转发、克隆网站。