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