Flutter Cupertino风格 push时隐藏底部Tab

flutter.png

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

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

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

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

expect.png

核心代码如下：

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();
                  }
                )
              );
            },
          ),
        ),
    );
  }
}

看一下运行结果：

showtabbar.gif

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

怎么把下面的TabBar隐藏？

目前找到两种方法：

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

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

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

hidetabbar.gif

方法二： 修改创建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包裹

black.gif

可以看到点击第一个tab操作时显示正常，第二个tab时竟然黑屏了

怎么解决？

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

navigationBar: CupertinoNavigationBar(
            middle: Text("首页"),
            transitionBetweenRoutes: false,
        )

之后便可正常显示。

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