Flutter Cupertino风格 push时隐藏底部TabBar

使用Flutter能够快速便捷高性能的在iOS和Android上建立界面，真正作到了一次代码，多处运行。

Flutter在部分组件上区分了iOS样式(Cupertino)和Material样式。

若是想在iOS设备上显示iOS原生样式，要是用Cupertino类型的Widget，在Android上使用Material类型的Widget，这须要在代码中根据平台来区分。

简单建立一个Cupertino样式的底部一个TabBar，其中含有三个BottomNavigationBarItem，对应三个页面，每一个页面中有NavigationBar。

核心代码以下：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(title: Text("首页"), icon: Icon(Icons.menu)),
            BottomNavigationBarItem(title: Text("项目"), icon: Icon(Icons.business)),
            BottomNavigationBarItem(title: Text("个人"), icon: Icon(Icons.account_box)),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (context) {
            switch (index) {
              case 0:
                return FirstPage();
                break;
              case 1:
                return SecondPage();
                break;
              case 2:
                return ThirdPage();
                break;
              }
            },
          );

        },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold (
        navigationBar: CupertinoNavigationBar(
            middle: Text("首页"),
        ),
        child: Center(
          child: CupertinoButton (
            child: Text("展现详情"),
            onPressed: () {
              Navigator.of(context).push(
                CupertinoPageRoute(
                  builder: (BuildContext context) {
                    return DetailPage();
                  }
                )
              );
            },
          ),
        ),
    );
  }
}
复制代码

看一下运行结果：

发现每一个tab都有一个独立的Navigation导航，push到后一个页面时，不会隐藏屏幕下方的tabbar。有些时候需求要求这样，可是在国内，大部分时候产品会要求push的时候隐藏下面的tabbar。

怎么把下面的TabBar隐藏？

目前找到两种方法：

方法一：push的时候，添加rootNavigato参数并将值设置为true

Navigator.of(context,rootNavigator: true).push(
                CupertinoPageRoute(
                  builder: (BuildContext context) {
                    return DetailPage();
                  }
                )
              )
复制代码

修改以后，看一下运行结果

方法二： 修改建立tabbar时的代码

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(title: Text("首页"), icon: Icon(Icons.menu)),
            BottomNavigationBarItem(title: Text("项目"), icon: Icon(Icons.business)),
            BottomNavigationBarItem(title: Text("个人"), icon: Icon(Icons.account_box)),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          // return CupertinoTabView(
          //   builder: (context) {
            switch (index) {
              case 0:
                return FirstPage();
                break;
              case 1:
                return SecondPage();
                break;
              case 2:
                return ThirdPage();
                break;
              }
            },
        //   );

        // },
    );
  }
}
复制代码

每一个page再也不用CupertinoTabView包裹

能够看到点击第一个tab操做时显示正常，第二个tab时居然黑屏了

怎么解决？

在FirstPage、SecondPage、ThirdPage中， navigationBar属性添加transitionBetweenRoutes: false。

navigationBar: CupertinoNavigationBar(
            middle: Text("首页"),
            transitionBetweenRoutes: false,
        )
复制代码

以后即可正常显示。

问题参考1 问题参考2 问题参考3