1. 基本介紹

BottomNavigationBar 提供了常見的底部導(dǎo)航條功能绵估。

2. 示例代碼

代碼下載地址础淤。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

BottomNavigationBar屬性	介紹
items	必填項蛇数，設(shè)置各個按鈕,
onTap	點擊事件
currentIndex	當(dāng)前選中 item 下標
elevation	控制陰影高度称近，默認為 8.0
type	BottomNavigationBarType撇贺，默認 fixed趟脂，設(shè)置為 shifting 時，建議設(shè)置選中樣式抢韭，和為選中樣式薪贫，提供一個特殊動畫
fixedColor	選中 item 填充色
backgroundColor	整個 BottomNavigationBar 背景色
iconSize	圖標大小，默認 24.0
selectedItemColor	選中 title 填充色
unselectedItemColor	未選中 title 填充色
selectedIconTheme	選中 item 圖標主題
unselectedIconTheme	未選中 item 圖標主題
selectedFontSize	選中 title 字體大小刻恭，默認14.0
unselectedFontSize	未選中 title 字體大小瞧省，默認12.0
selectedLabelStyle	選中 title 樣式 TextStyle
unselectedLabelStyle	未選中 title 樣式 TextStyle
showSelectedLabels	是否展示選中 title，默認為true
showUnselectedLabels	是否展示未選中 title鳍贾，默認為true
mouseCursor	鼠標懸停鞍匾，Web 開發(fā)可以了解

4. BottomNavigationBar 組件

4.1 容器創(chuàng)建

優(yōu)雅的編程，首先創(chuàng)建一個 bottomnavigationbar.dart 文件贾漏。由于之后有頁面效果變化候学，所以這里繼承 StatefulWidgets。

import 'package:flutter/material.dart';

class FMBottomNavBarVC extends StatefulWidget {
  @override
  FMBottomNavBarState createState() => FMBottomNavBarState();
}

class FMBottomNavBarState extends State <FMBottomNavBarVC>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar'),
      ),
      bottomNavigationBar: _bottomNavigationBar(),
      body: Container(),
    );
  }

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
    );
  }

  List<BottomNavigationBarItem> _items(){
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.title),
        title: Text('title'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.favorite),
        title: Text('favorite'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.backspace),
        title: Text('backspace'),
      ),
    ];
  }
}

4.2 items

使用 items 設(shè)置底部按鈕纵散。

bottom navbar items.png

4.3 onTap

使用 onTap 捕獲 items 的點擊事件，我們來一次點擊下方按鈕隐圾，看一下打印結(jié)果伍掀。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        print("選中 index = ${index}");
      },
    );
  }

bottom navbar ontap.png

4.4 currentIndex

設(shè)置當(dāng)前高亮的 item，下邊我們來實現(xiàn)以下點擊按鈕暇藏，切換到對應(yīng)的按鈕高亮蜜笤。我們先聲明一個變量記錄下標，在 item 點擊時盐碱，記錄點擊的 item 下標把兔，刷新頁面沪伙。在使用 currentIndex 屬性改變頁面高亮按鈕為變量保存的這個 item。

  var _selectedIndex = 0;
  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
    );
  }

navbar currentIndex 0.png

navbar currentIndex 1.png

navbar currentIndex 2.png

4.5 type

使用 type 屬性更改下方按鈕樣式县好。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      type: BottomNavigationBarType.shifting,
    );
  }

nav type fixed.png

nav type shifting.png

4.6 fixedColor, unselectedItemColor

使用 fixedColor 改變按鈕選中時填充色围橡，unselectedItemColor 改變未選中時的填充色。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      unselectedItemColor: Colors.red,
      iconSize: 30,
    );
  }

navbar fillColor.png

4.7 iconSize

使用 iconSize 改變圖標大小缕贡。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      iconSize: 30,
    );
  }

navbar iconSize.png

4.8 selectedFontSize, unselectedFontSize

使用 selectedFontSize 設(shè)置選中時 title 字體大小翁授，默認14。
使用 unselectedFontSize 設(shè)置未選中時 title 字體大小晾咪，默認12收擦。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      unselectedItemColor: Colors.red,
      iconSize: 30,
      selectedFontSize: 16,
      unselectedFontSize: 11,
    );
  }

navbar fontSize.png

4.9 selectedLabelStyle, unselectedLabelStyle

使用 selectedLabelStyle 設(shè)置選中時 title 字體樣式。
使用 unselectedLabelStyle 設(shè)置選中時 title 字體樣式谍倦。

注意：顏色受 fixedColor塞赂，unselectedItemColor 顏色影響，所以這兩項沒有效果昼蛀。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      unselectedItemColor: Colors.red,
      iconSize: 30,
      selectedFontSize: 16,
      unselectedFontSize: 11,
      selectedLabelStyle: TextStyle(
        color: Colors.yellow,
        fontSize: 12
      ),
      unselectedLabelStyle: TextStyle(
        color: Colors.cyan,
      ),
    );
  }

navbar label style.png

4.10 showSelectedLabels, showUnselectedLabels

使用 showSelectedLabels 設(shè)置選中時是否顯示 title宴猾，默認為 true。
使用 showUnselectedLabels 設(shè)置選中時是否顯示 title曹洽，默認為 true鳍置。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      unselectedItemColor: Colors.red,
      iconSize: 30,
      selectedFontSize: 16,
      unselectedFontSize: 11,
      selectedLabelStyle: TextStyle(
        color: Colors.yellow,
        fontSize: 12
      ),
      unselectedLabelStyle: TextStyle(
        color: Colors.cyan,
      ),
      showSelectedLabels: false,
      showUnselectedLabels: false,
    );
  }

navbar showlabels.png

4.11 selectedIconTheme, unselectedIconTheme

使用 selectedIconTheme 設(shè)置選中時 icon 主題。
使用 unselectedIconTheme 設(shè)置選中時 icon 主題送淆。
注意：主題設(shè)置的優(yōu)先級較高税产，如果同時設(shè)置了上述其他屬性，優(yōu)先執(zhí)行主題設(shè)置偷崩。

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: _items(),
      onTap: (int index){
        _selectedIndex = index;
        print("選中 index = ${index}");
        setState(() {

        });
      },
      currentIndex: _selectedIndex,
      // type: BottomNavigationBarType.shifting,
      fixedColor: Colors.green,
      unselectedItemColor: Colors.red,
      iconSize: 30,
      selectedFontSize: 16,
      unselectedFontSize: 11,
      selectedLabelStyle: TextStyle(
        color: Colors.yellow,
        fontSize: 12
      ),
      unselectedLabelStyle: TextStyle(
        color: Colors.cyan,
      ),
      showSelectedLabels: false,
      showUnselectedLabels: false,
      selectedIconTheme: IconThemeData(
        color: Colors.black,
        size: 24,
      ),
      unselectedIconTheme: IconThemeData(
        color: Colors.black,
        size: 24,
      ),
    );
  }

navbar iconTheme.png

5. 技術(shù)小結(jié)

BottomNavigationBar 應(yīng)用非常廣泛辟拷。
沒有太多自定義空間，主要就是顏色字體圖標的設(shè)置阐斜，多試一試各種屬性就可以掌握衫冻。

Flutter入門（15）：Flutter 組件之 BottomNavigationBar 詳解