Flutter（43）：Cupertino组件之CupertinoTabScaffold、CupertinoTabBar、CupertinoTabView

Flutter教学目录持续更新中

Github源代码持续更新中

1.介绍

• CupertinoTabScaffold：标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上
• CupertinoTabBar：iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。
• CupertinoTabView：支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用

2.CupertinoTabScaffold

• tabBar：底部选项卡
• tabBuilder：底部选项卡对应的根内容
• controller：控制器
• backgroundColor：背景色
• resizeToAvoidBottomInset = true：键盘是否顶起页面

3.CupertinoTabBar

• items：子widget
• onTap：点击事件
• currentIndex = 0：当前位置
• backgroundColor：背景色
• activeColor：选中颜色
• inactiveColor = _kDefaultTabBarInactiveColor：未选中颜色
• iconSize = 30.0：大小
• border：边框

4.CupertinoTabView

• builder：根内容
• navigatorKey：构建的navigatorKey
• defaultTitle：默认路由标题
• routes：路由表
• onGenerateRoute：可以做路由拦截
• onUnknownRoute：未知路由
• navigatorObservers = const []：

5.使用

• 由于本教程还没有对navigator，route进行讲解，所以这里暂时不对跟这两个有关系的参数进行深入剖析，在后面的教程中再去深入讲解，目前做个简单了解就可以了
• 这里CupertinoTabView里面的routes跟MaterialApp/CupertinoApp里面的routes用法是一样的，但是作用域是不同的，可以理解为嵌套型路由。这个跟ios开发中是一样的，底部tab对应页面，每个页面可以嵌套自己的导航路由系统，例如在首页容器中进行页面的跳转；对于android开发就像是activity中嵌套fragment，fragment跳转fragment，对这些fragment做了压栈出栈处理差不多；这样理解起来就比较好懂一点了
• 这里就先讲解这么多，下面我们来看看具体的实现

5.1.CupertinoTabView嵌套型路由跳转

这种就是在CupertinoTabView内部再指定一套路由表，实现内部导航。这种情况下HomeItemPage是嵌套在CupertinoTabScaffoldPage页面内部的，所以HomeItemPage的点击事件‘下一个页面’=》Navigator.pushNamed(context, Constant.homeHomePage);这个在没有配置CupertinoTabView的routes的时候是不起作用的，因为这是嵌套导航。

1602234680(1).png

1602234694(1).png

class _CupertinoTabScaffoldPageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CupertinoTabScaffold'),
      ),
      body: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.mail),
              title: Text('邮件'),
            ),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (context) {
               if (index == 0) {
                 return HomeItemPage();
               } else {
                 return EmailItemPage();
               }
            },
             routes: {
               Constant.homeHomePage: (context) => HomePage(),
             },
          );
        },
      ),
    );
  }
}

class HomeItemPage extends StatefulWidget {
  @override
  State createState() {
    return _HomeItemPageState();
  }
}

class _HomeItemPageState extends State
    with WidgetsBindingObserver, AutomaticKeepAliveClientMixin {
  var _count = 0;

  @override
  void initState() {
    print('_HomeItemPageState initState');
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeDependencies() {
    print('_HomeItemPageState didChangeDependencies');
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    print('_HomeItemPageState build');
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          Text('首页'),
          Text('num：$_count'),
          RaisedButton(
            onPressed: () {
              _count++;
              setState(() {});
            },
            child: Text('num++'),
          ),
          RaisedButton(
            onPressed: () {
              Navigator.pushNamed(context, Constant.homeHomePage);
            },
            child: Text('下一个页面'),
          ),
          RaisedButton(
            onPressed: () {
              setState(() {

              });
            },
            child: Text('刷新页面'),
          ),
        ],
      ),
    );
  }

  @override
  void deactivate() {
    super.deactivate();
    print('_HomeItemPageState deactivate');
  }

  @override
  void didUpdateWidget(HomeItemPage oldWidget) {
    print('_HomeItemPageState didUpdateWidget');
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    print('_HomeItemPageState dispose');
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void reassemble() {
    super.reassemble();
    print('_HomeItemPageState reassemble');
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('_HomeItemPageState didChangeAppLifecycleState $state');
    super.didChangeAppLifecycleState(state);
  }

  @override
  bool get wantKeepAlive => true;
}

5.2.CupertinoTabView非嵌套型路由跳转

那么问题来了，我不想嵌套在CupertinoTabScaffoldPage内，我要做平常的跳转呢。这个也好办，最简单直接的就是看Navigator持有的context是谁的，如果是来自CupertinoTabView那么就是嵌套导航，那只要不来自CupertinoTabView不就可以了，使用CupertinoTabScaffoldPage的context不就可以了吗，这样就是熟悉的味道了。

1602236370(1).png

1602236379(1).png

class _CupertinoTabScaffoldPageState extends State {

  _jump() {
    Navigator.of(context).pushNamed(Constant.homeHomePage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CupertinoTabScaffold'),
      ),
      body: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.mail),
              title: Text('邮件'),
            ),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (context) {
              return Center(
                child: RaisedButton(
                  onPressed: () {
                    _jump();
                  },
                  child: Text('next'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

这一节又是涉及到了路由导航的问题，这里目前还是不展开深入讲解了，后面的教程中再详细说。

到了这里Cupertino组件组件基本上就是讲完了，内容比Material组件少很多，我想谷歌我是希望推广Material组件吧。后面我们会开始对布局组件，滚动组件做介绍，前面的教程也讲解了一点，后面会做更为仔细的介绍。

下一节：Layout组件之Container

Flutter（44）：Layout组件之Container

Flutter教学目录持续更新中

Github源代码持续更新中