CupertinoTabScaffold | Flutter

微信交流群

老孟公众号

# CupertinoTabScaffold

CupertinoTabScaffold 提供了类似微信式的底部导航，用法如下：

@override
Widget 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'),
      );
    },
  );
}

1
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();

@override
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

这时你会发现顶部没有导航啊，添加导航的方式是修改其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

效果如下：

CupertinoTabBar CupertinoTabView