微信交流群

# CupertinoTabBar

CupertinoTaBar并不是对应TabBar,CupertinoTaBar和CupertinoTabScaffold配合使用,是一个底部导航。

基本用法如下:

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
    ],
  )
  ...
)
1
2
3
4
5
6
7
8
9

items表示每一个tab,类型是BottomNavigationBarItem,效果如下:

onTap是点击tab时的回调,背景色、选中状态icon颜色、未选中颜色设置如下:

CupertinoTabBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
  ],
  onTap: (index){
    print('$index');
  },
  currentIndex: 1,
  backgroundColor: Colors.blue,
  activeColor: Colors.red,
)
1
2
3
4
5
6
7
8
9
10
11
12

效果如下:

# CupertinoTabView

CupertinoTabView是拥有导航状态和历史的单独控件,用法如下:

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
    ],
  ),
  tabBuilder: (context, index) {
    return CupertinoTabView(
      defaultTitle: '老孟',
      builder: (context){
        return Center(
          child: Text('$index'),
        );
      },
    );
  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

builder构建当前的控件,defaultTitle并不是显示在顶部的title,而是路由的title。

routesonGenerateRouteonUnknownRoutenavigatorObservers的用法和MaterialApp对应参数用法一样。