Flutter CupertinoTabView


简介

具有自己的Navigator状态与历史记录的选项卡视图组件.

在使用时需要注意,该组件有自己的路由体系, 有自己的导航系统, 并且他自身内部的导航系统并不与任何父母元素共享

基本用法

关于它自身的路由体系, 有以下几点需要注意几点.

  • 在它的根路由映射('/'), 当它有 builder 属性的时候, 指向build的界面, 非得使用router中定义的根目录
  • 当组件未设定builder时, 在他的路由表 router 中, 一定要指定 '/' 跟路由, 不然会产生错误.
  • 当指定 onGenerateRoute 属性时, 它应该返回一个回空有效的route.
  • 如果所有的配置都未命中, 则会命中 onUnknownRoute 属性. 这与MaterialApp一致相同

如果你想从 CupertinoTabView 的路由体系, 跳转到外层的路由中, 您需要在跳转时调用 Navigator,并设定 rootNavigator 参数

Navigator.of(context, rootNavigator: true)

实例演示

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CupertinoTabScaffoldDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoTabScaffoldDemo> {
  int index = 0;

  changeIndex(int _index) {
    this.setState(() {
      index = _index;
    });
  }
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      child: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: <BottomNavigationBarItem> [
            BottomNavigationBarItem(
              title: Text("A"),
              icon: Icon(Icons.add),
            ),
            BottomNavigationBarItem(
              title: Text("B"),
              icon: Icon(Icons.add),
            )
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            routes: {
              '/': (context) {
                return CupertinoPageScaffold(
                    navigationBar: CupertinoNavigationBar(
                      middle: Text('Page 1 of tabView $index'),
                    ),
                  child: Center(
                    child: Text('CupertinoTabView /'),
                  ),
                );
              },
              '/home': (context) {
                return CupertinoPageScaffold(
                  navigationBar: CupertinoNavigationBar(
                    middle: Text('Page 1 of tabView $index'),
                  ),
                  child: Center(
                    child: Text('CupertinoTabView home'),
                  ),
                );
              }
            },
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text('Page 1 of tabView $index'),
                ),
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 100),
                      CupertinoButton(
                        child: Text('Next page is self home page'),
                        onPressed: () {
                          Navigator.of(context).pushNamed('/home');
                        },
                      ),
                      CupertinoButton(
                        child: Text('Next page is home home page'),
                        onPressed: () {
                          Navigator.of(context, rootNavigator: true).pushNamed('/home');
                        },
                      )
                    ],
                  )
              );
            },
          );
        },
      ),
    );
  }
}