flutter.png

使用Flutter可以快速便捷高性能的在iOS和Android上創(chuàng)建界面，真正做到了一次代碼，多處運(yùn)行。

Flutter在部分組件上區(qū)分了iOS樣式(Cupertino)和Material樣式。

如果想在iOS設(shè)備上顯示iOS原生樣式，要是用Cupertino類型的Widget，在Android上使用Material類型的Widget，這需要在代碼中根據(jù)平臺來區(qū)分。

簡單創(chuàng)建一個Cupertino樣式的底部一個TabBar，其中含有三個BottomNavigationBarItem，對應(yīng)三個頁面，每個頁面中有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();
                  }
                )
              );
            },
          ),
        ),
    );
  }
}

看一下運(yùn)行結(jié)果：

showtabbar.gif

發(fā)現(xiàn)每個tab都有一個獨(dú)立的Navigation導(dǎo)航，push到后一個頁面時，不會隱藏屏幕下方的tabbar。有些時候需求要求這樣，但是在國內(nèi)，大部分時候產(chǎn)品會要求push的時候隱藏下面的tabbar。

怎么把下面的TabBar隱藏？

目前找到兩種方法：

方法一：push的時候，添加rootNavigato參數(shù)并將值設(shè)置為true

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

修改之后，看一下運(yùn)行結(jié)果

hidetabbar.gif

方法二： 修改創(chuàng)建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

可以看到點(diǎn)擊第一個tab操作時顯示正常，第二個tab時竟然黑屏了

怎么解決？

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

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

之后便可正常顯示。

問題參考1
問題參考2
問題參考3