1. 基本介紹

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

2. 示例代碼

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

3. 屬性介紹

4. BottomNavigationBar 組件

4.1 容器創(chuàng)建

優(yōu)雅的編程，首先創(chuàng)建一個(gè) 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 的點(diǎn)擊事件，我們來一次點(diǎn)擊下方按鈕，看一下打印結(jié)果。

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

bottom navbar ontap.png

4.4 currentIndex

設(shè)置當(dāng)前高亮的 item，下邊我們來實(shí)現(xiàn)以下點(diǎn)擊按鈕，切換到對應(yīng)的按鈕高亮。我們先聲明一個(gè)變量記錄下標(biāo)，在 item 點(diǎn)擊時(shí)，記錄點(diǎn)擊的 item 下標(biāo)，刷新頁面。在使用 currentIndex 屬性改變頁面高亮按鈕為變量保存的這個(gè) 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 改變按鈕選中時(shí)填充色，unselectedItemColor 改變未選中時(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,
    );
  }

navbar fillColor.png

4.7 iconSize

使用 iconSize 改變圖標(biāo)大小。

  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è)置選中時(shí) title 字體大小，默認(rèn)14。
使用 unselectedFontSize 設(shè)置未選中時(shí) title 字體大小，默認(rèn)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è)置選中時(shí) title 字體樣式。
使用 unselectedLabelStyle 設(shè)置選中時(shí) title 字體樣式。

注意：顏色受 fixedColor，unselectedItemColor 顏色影響，所以這兩項(xiàng)沒有效果。

  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è)置選中時(shí)是否顯示 title，默認(rèn)為 true。
使用 showUnselectedLabels 設(shè)置選中時(shí)是否顯示 title，默認(rèn)為 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è)置選中時(shí) icon 主題。
使用 unselectedIconTheme 設(shè)置選中時(shí) icon 主題。
注意：主題設(shè)置的優(yōu)先級較高，如果同時(shí)設(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)用非常廣泛。
• 沒有太多自定義空間，主要就是顏色字體圖標(biāo)的設(shè)置，多試一試各種屬性就可以掌握。