本篇文章中心思想

本文介紹一下Flutter實現，APP底部導航欄按鈕的幾種實現方式。CupertinoTabBar，BottomNavigationBar，CupertinoTabScaffold，CupertinoTabView。接下來我會把每種實現方式都來介紹一下。

Flutter開發底部導航實現方式一CupertinoTabBar

CupertinoTabBar是Flutter內建的iOS風格的選項卡，用於在頁面底部顯示幾個Tab，要使用Cupertino風格的元件，必須先匯入標頭檔案，如下程式碼：import 'package:flutter/cupertino.dart';CupertinoTabBar元件的用法也比較簡單，程式碼如下：class CupertinoTabBarDemo extends StatefulWidget { @override _CupertinoTabBarDemoState createState() => _CupertinoTabBarDemoState();}class _CupertinoTabBarDemoState extends State<CupertinoTabBarDemo> { @override Widget build(BuildContext context) { return CupertinoTabScaffold( tabBar: CupertinoTabBar( items: <BottomNavigationBarItem>[ BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首頁')), BottomNavigationBarItem(icon: Icon(CupertinoIcons.conversation_bubble), title: Text('訊息')), BottomNavigationBarItem(icon: Icon(CupertinoIcons.profile_circled), title: Text('我的')), ], ), tabBuilder: (BuildContext context, int index) { return CupertinoTabView( builder: (BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text('Page 1 of tab $index'), ), child: Center(), // 這裡有省略一些程式碼 ); }, ); }, ); }}

根據官方推薦，想實現 iOS 風格的底部導航欄，最推薦的就是將 CupertinoTabBar 和 CupertinoTabScaffold 組合使用，使用起來也很方便。當然，雖然也能把 CupertinoTabBar 用在 material 風格中，比如傳入 Scaffold.bottomNavigationBar 屬性中使用，但總歸會顯得有點怪異。

第三方開源的實現方式

https://github.com/TechieBlossom/simpleanimations

這種也挺好看的，如下：

實現方式如下程式碼：

https://medium.com/@tonyowen/flutter-bottom-tab-bar-animation-75d1ca58c096

總結

今天就實現這些了，後續繼續更新其他的實現方式。