【Flutter 3-1】Flutter手把手教程UI佈局和Widget——底部導航欄BottomNavigationBar使用

做者 | 弗拉德
來源 | 弗拉德（公衆號：fulade_me)

BottomNavigationBar

BottomNavigationBar 和 BottomNavigationBarItem 配合來共同展現Flutter裏面的底部狀態欄，底部狀態欄是在移動端很重要的控件。

先看一下 BottomNavigationBar構造方法

BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem 數組
    @required this.items,
    /// 點擊事件方法
    this.onTap,
    /// 當前選中的 元素下標
    this.currentIndex = 0,
    ///  底部導航欄的Z座標
    this.elevation,
    /// 默認是 BottomNavigationBarType.shifting 通常咱們使用 BottomNavigationBarType.fixed
    this.type,
    /// 選中項目顏色的值
    Color fixedColor,
    /// 背景顏色
    this.backgroundColor,
    /// BottomNavigationBarItem圖標的大小
    this.iconSize = 24.0,
    /// 選中時圖標和文字的顏色
    Color selectedItemColor,
    /// 未選中時圖標和文字的顏色
    this.unselectedItemColor,
    // 選中時的子Item的樣式
    this.selectedIconTheme,
    /// 未選中時的子Item的樣式
    this.unselectedIconTheme,
    // 選中時字體大小
    this.selectedFontSize = 14.0,
    /// 未選中時的字體大小
    this.unselectedFontSize = 12.0,
    /// 選中的時候的字體樣式
    this.selectedLabelStyle,
    /// 未選中時的字體樣式
    this.unselectedLabelStyle,
    /// 是否爲未選擇的BottomNavigationBarItem顯示標籤
    this.showSelectedLabels = true,
    //// 是否爲選定的BottomNavigationBarItem顯示標籤
    this.showUnselectedLabels,
    /// pc端或web端使用
    this.mouseCursor,
})

咱們來作一個點擊底部狀態欄按鈕切換顏色的Demo

class _BottomNavigationBarDemoPageState
    extends State<BottomNavigationBarDemoPage> {
  int selectedIndex = 0;
  List<Container> containerList = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.green,
    )
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("BottomNavigationBarDemo"),
        backgroundColor: Colors.blue,
      ),
      body: containerList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        /// 這個很重要
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('F1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            title: Text('F2'),
            icon: Icon(Icons.book),
          ),
          BottomNavigationBarItem(
            title: Text('F3'),
            icon: Icon(Icons.school),
          ),
          BottomNavigationBarItem(
            title: Text('F4'),
            icon: Icon(Icons.perm_identity),
          ),
        ],
      ),
    );
  }
}

• Scaffold接收一個BottomNavigationBar做爲bottomNavigationBar的參數，而後BottomNavigationBar接收一個items的數組，這個數組裏面傳入了4個BottomNavigationBarItem對象分別命名爲F1、F2、F3、F4

• type參數傳入的是BottomNavigationBarType.fixed，默認是BottomNavigationBarType.shifting，默認的效果是 只有在選中BottomNavigationBarItem時纔會顯示文字。設置成BottomNavigationBarType.fixed非選中狀態下也會顯示文字和圖標

• onTap實現的是一個方法，參數是被點擊的當前BottomNavigationBarItem的下標，在這裏被點擊後調用setState來刷新頁面的顏色

效果以下：

平常開發中以上效果基本能知足大多數需求
若是想要自定義下面Icon的樣式，能夠使用 BottomAppBar

這裏也介紹兩個不錯的庫

• tab_bar_animation

  連接: https://github.com/tunitowen/tab_bar_animation
  效果以下：
  

• simpleanimations
  連接: https://github.com/TechieBlossom/simpleanimations
  效果以下：
  

想體驗以上的示例的運行效果，能夠到個人Github倉庫項目flutter_app->lib->routes->bottom_navigation_page.dart查看，而且能夠下載下來運行並體驗。

---