Flutter 系列文章：Flutter BottomNavigationBar 控件介紹

時間  2019-11-07
標籤 flutter 系列 文章 bottomnavigationbar 控件 介紹 简体版
原文   原文鏈接

1、控件介紹

一個底部導航欄控件，用於進行不一樣視圖的切換，底部導航欄能夠由文本、圖標 或者二者結合的形式組成，底部導航欄統籌與Scaffold結合使用，它一般做爲Scaffold.bottomNavigationBar參數提供。bash

2、使用方法

BottomNavigationBar（{
    Key key，
    @ required List < BottomNavigationBarItem > items，//放入導航欄的控件item列表長度items必須至少爲2，每一個項目的圖標和標題不得爲空，
    ValueChanged < int > onTap，//點擊導航欄子item的時候的
    int currentIndex：0，//當前活動BottomNavigationBarItem的項目 索引。
    double elevation：8.0，//設置z 軸座標，設置了並無什麼效果
    BottomNavigationBarType type，//底部導航欄的類型，有fixed和shifting兩個類型，不一樣類型顯示效果不同
    Color fixedColor，//選中的時候的字體顏色，不能跟selectedItemColor 一塊兒用
    Color backgroundColor，//導航欄背景顏色
    double iconSize：24.0，// icon的大小 ,設置了並木有效果
    Color selectedItemColor，//選中的時候的字體顏色，不能跟fixedColor 一塊兒用
    Color unselectedItemColor，//未選中BottomNavigationBarItem標籤 的字體大小
    IconThemeData selectedIconTheme： const IconThemeData（），//選中時的子Item的樣式，這個不能跟BottomNavigationBarItem Icon 的colors 一塊兒用，不然會以Icon 的colors爲準，主題設置的不會生效，而且icon必須爲官方的icon爲主，不然也沒法生效
    IconThemeData unselectedIconTheme： const IconThemeData（），              //未選中時的BottomNavigationBarItem.icon s中圖標的大小，不透明度和顏色
    double selectedFontSize： 14.0，//選中的tab的字體的大小
    double unselectedFontSize： 12.0，//未選中BottomNavigationBarItem標籤 的字體大小
    TextStyle selectedLabelStyle，//選中的時候的字體樣式，設置了並無生效
    TextStyle unselectedLabelStyle，//未選中時的字體樣式，設置了並無生效
    bool showSelectedLabels，//是否爲未選擇的BottomNavigationBarItem顯示標籤
    bool showUnselectedLabels,//是否爲選定的BottomNavigationBarItem顯示標籤
}）

BottomNavigationBarItem({
    @required Widget icon,//設置icon圖標
    Widget title,//設置標籤控件
    Widget activeIcon,//選中的時候的標籤控件
    Color backgroundColor,//BottomNavigationBarType爲shifting時的背景顏色
  })
  
複製代碼

2、經常使用屬性

1.設置導航欄的子item控件，放入導航欄的控件item列表長度items必須至少爲2，每一個項目的圖標和標題不得爲空app

items: <BottomNavigationBarItem>[
              //放入導航欄的控件item列表長度items必須至少爲2，每一個項目的圖標和標題不得爲空
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.ac_unit,
//                    color: Colors.black,
                    size: 20,
                  ), //設置使用什麼圖標控件
                  title: Text('熱門'), //設置使用什麼文本控件
//                  activeIcon: getTabIcon(0), //選中時要顯示的圖標控件
                  backgroundColor:
                      Colors.red), //BottomNavigationBarType爲shifting時的背景顏色
              BottomNavigationBarItem(
                  icon: getTabIcon(1), //設置使用什麼圖標控件
                  title: getTabTitle(1), //設置使用什麼文本控件
                  activeIcon: getTabIcon(1), //選中時要顯示的圖標控件
                  backgroundColor: Colors.blue),
              BottomNavigationBarItem(
                  icon: getTabIcon(2), //設置使用什麼圖標控件
                  title: getTabTitle(2), //設置使用什麼文本控件
                  activeIcon: getTabIcon(2), //選中時要顯示的圖標控件
                  backgroundColor: Colors.green)
            ],
複製代碼

2.導航欄子item點擊的回調ide

onTap: (index) {
              //點擊導航欄子item的時候的
              setState(() {
                _tabIndex = index;
              });
            },
複製代碼

3.底部導航欄的類型，有fixed和shifting兩個類型，不一樣類型顯示效果不同字體

type: BottomNavigationBarType.fixed, //底部導航欄的類型，有fixed和shifting兩個類型，不一樣類型顯示效果不同
複製代碼

4.選中的時候的字體顏色，不能跟selectedItemColor 一塊兒用ui

fixedColor: Colors.black, //選中的時候的字體顏色，不能跟selectedItemColor 一塊兒用
複製代碼

5.設置icon大小this

iconSize: 200.0, // icon的大小
複製代碼

6.當前活動BottomNavigationBarItem的項目索引。spa

currentIndex: _tabIndex
複製代碼

7.選中的tab的字體的大小code

selectedFontSize: 30, //選中的tab的字體的大小
複製代碼

8.導航欄背景顏色orm

backgroundColor: Colors.lightBlueAccent, //導航欄背景顏色
複製代碼

9.選中時的子Item的樣式，這個不能跟BottomNavigationBarItem Icon 的colors 一塊兒用，不然會以Icon 的colors爲準，主題設置的不會生效，而且icon必須爲官方的icon爲主，不然也沒法生效cdn

selectedIconTheme: IconThemeData(
              //選中時的子Item的樣式，這個不能跟BottomNavigationBarItem Icon 的colors 一塊兒用，不然會以Icon 的colors爲準，主題設置的不會生效，而且icon必須爲官方的icon爲主，不然也沒法生效
              color: Colors.yellow,
              opacity: 0.7,
            ),
複製代碼

10.選中的時候的字體顏色，不能跟fixedColor 一塊兒用

selectedItemColor: Colors.yellow, //選中的時候的字體顏色，不能跟fixedColor 一塊兒用
複製代碼

11.選中的時候的字體樣式，設置了並無生效

selectedLabelStyle: TextStyle(
                color: Colors.yellow, fontSize: 20), //選中的時候的字體樣式，設置了並無生效        
複製代碼

12.是否爲未選擇的BottomNavigationBarItem顯示標籤,設置了沒有看出什麼效果

showUnselectedLabels:
                true, //是否爲未選擇的BottomNavigationBarItem顯示標籤,設置了沒有看出什麼效果
複製代碼

13.未選中BottomNavigationBarItem標籤 的字體大小

unselectedFontSize: 25, //未選中BottomNavigationBarItem標籤 的字體大小
複製代碼

14.未選中時的BottomNavigationBarItem.icon s中圖標的大小，不透明度和顏色

unselectedIconTheme: IconThemeData(
              //未選中時的BottomNavigationBarItem.icon s中圖標的大小，不透明度和顏色
              color: Colors.pink,
              opacity: 0.7,
            ),
複製代碼

15.當前爲選中的BottomNavigationBarItem.labels 的顏色

unselectedItemColor:Colors.pink, //當前爲選中的BottomNavigationBarItem.labels 的顏色
複製代碼

16.未選中時的字體樣式，設置了並無生效

unselectedLabelStyle: TextStyle( color: Colors.green, fontSize: 15), //未選中時的字體樣式，設置了並無生效
複製代碼

17.選中的時候的字體樣式，設置了並無生效

showSelectedLabels: true, //選中的時候的字體樣式，設置了並無生效
複製代碼

3、總結

1.一個基礎的底部導航欄控件，selectedIconTheme，selectedLabelStyle，selectedFontSize，showUnselectedLabels 與unselect相關的屬性的設置的前提是 BottomNavigationBarItem，裏面沒有去設置相關的顏色、屬性、樣式等，不然會以BottomNavigationBarItem裏面的屬性設置爲主，特別注意selectedIconTheme，unselectedIconTheme相關必需要用flutter的Icon 控件進行設置，本身提供的圖片是沒法設置這些屬性的。

2.通常狀況下選中跟未選中的時候，字體跟對應的圖標都要統一切換爲某一種顏色，這裏能夠用selectedIconTheme，unselectedIconTheme相關的屬性，但這個僅限於用系統的圖標，也可使用BottomNavigationBarItem裏面設置圖標、字體的方式，如果本身的圖標建議使用這種方式；

/*
     * 初始化選中和未選中的icon
     */
    tabImages = [
      [
        getTabImage('images/tab_ic_home.png'),
        getTabImage('images/tab_ic_home_sel.png')
      ],
      [
        getTabImage('images/tab_ic_follow.png'),
        getTabImage('images/tab_ic_follow_sel.png')
      ],
      [
        getTabImage('images/tab_ic_profile.png'),
        getTabImage('images/tab_ic_profile_sel.png')
      ]
    ];
    
  /*
   * 根據選擇得到對應的normal或是press的icon
   */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }
  
    /*
   * 獲取bottomTab的顏色和文字
   */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
    } else {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));
    }
  }

  /*
   * 根據image路徑獲取圖片
   */
  Image getTabImage(path) {
    return Image.asset(path, width: 23.0, height: 23.0);
  }
  
  
複製代碼

4、一個完整的例子

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'BottomNavigationBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationBarPage(),
    ));

// This app is a stateful, it tracks the user's current choice.

class BottomNavigationBarPage extends StatefulWidget {
  BottomNavigationBarPage({Key key, this.uid}) : super(key: key);
  final int uid;

  @override
  _BottomNavigationBarPageState createState() =>
      _BottomNavigationBarPageState();
}

class _BottomNavigationBarPageState extends State<BottomNavigationBarPage> with SingleTickerProviderStateMixin {
  int _tabIndex = 0;
  var tabImages;
  var appBarTitles = ['首頁', '發現', '個人'];
  /* * 存放三個頁面，跟fragmentList同樣 */
  var _pageList;

  /* * 根據選擇得到對應的normal或是press的icon */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  /* * 獲取bottomTab的顏色和文字 */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
    } else {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));
    }
  }

  /* * 根據image路徑獲取圖片 */
  Image getTabImage(path) {
    return Image.asset(path, width: 23.0, height: 23.0);
  }

  void initData() {
    /* * 初始化選中和未選中的icon */
    tabImages = [
      [
        getTabImage('images/tab_ic_home.png'),
        getTabImage('images/tab_ic_home_sel.png')
      ],
      [
        getTabImage('images/tab_ic_follow.png'),
        getTabImage('images/tab_ic_follow_sel.png')
      ],
      [
        getTabImage('images/tab_ic_profile.png'),
        getTabImage('images/tab_ic_profile_sel.png')
      ]
    ];
    /* * 三個子界面 */
    _pageList = [
      Center(
        child: Text('第一頁'),
      ),
      Center(
        child: Text('第二頁'),
      ),
      Center(
        child: Text('第三頁'),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    //初始化數據
    initData();
    return Scaffold(
        body: _pageList[_tabIndex],
        bottomNavigationBar: Container(
          child: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              //放入導航欄的控件item列表長度items必須至少爲2，每一個項目的圖標和標題不得爲空
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.ac_unit,
// color: Colors.black,
                    size: 20,
                  ), //設置使用什麼圖標控件
                  title: Text('熱門'), //設置使用什麼文本控件
// activeIcon: getTabIcon(0), //選中時要顯示的圖標控件
                  backgroundColor:
                      Colors.red), //BottomNavigationBarType爲shifting時的背景顏色
              BottomNavigationBarItem(
                  icon: getTabIcon(1), //設置使用什麼圖標控件
                  title: Text('控件'), //設置使用什麼文本控件
// activeIcon: getTabIcon(1), //選中時要顯示的圖標控件
                  backgroundColor: Colors.blue),
              BottomNavigationBarItem(
                  icon: getTabIcon(2), //設置使用什麼圖標控件
                  title: getTabTitle(2), //設置使用什麼文本控件
                  activeIcon: getTabIcon(2), //選中時要顯示的圖標控件
                  backgroundColor: Colors.green)
            ],
            onTap: (index) {
              //點擊導航欄子item的時候的
              setState(() {
                _tabIndex = index;
              });
            },
            elevation: 150, //設置z 軸座標，設置了並無什麼效果
            type: BottomNavigationBarType
                .fixed, //底部導航欄的類型，有fixed和shifting兩個類型，不一樣類型顯示效果不同
            fixedColor: Colors.black, //選中的時候的字體顏色，不能跟selectedItemColor 一塊兒用
            iconSize: 200.0, // icon的大小
            currentIndex: _tabIndex, //當前活動BottomNavigationBarItem的項目 索引。
            selectedFontSize: 30, //選中的tab的字體的大小
// backgroundColor: Colors.lightBlueAccent, //導航欄背景顏色
            selectedIconTheme: IconThemeData(
              //選中時的子Item的樣式，這個不能跟BottomNavigationBarItem Icon 的colors 一塊兒用，不然會以Icon 的colors爲準，主題設置的不會生效，而且icon必須爲官方的icon爲主，不然也沒法生效
              color: Colors.yellow,
              opacity: 0.7,
            ),
// selectedItemColor: Colors.yellow, //選中的時候的字體顏色，不能跟fixedColor 一塊兒用
            selectedLabelStyle: TextStyle(
                color: Colors.yellow, fontSize: 20), //選中的時候的字體樣式，設置了並無生效
            showUnselectedLabels:
                true, //是否爲未選擇的BottomNavigationBarItem顯示標籤,設置了沒有看出什麼效果
            unselectedFontSize: 25, //未選中BottomNavigationBarItem標籤 的字體大小
            unselectedIconTheme: IconThemeData(
              //未選中時的BottomNavigationBarItem.icon s中圖標的大小，不透明度和顏色
              color: Colors.pink,
              opacity: 0.7,
            ),
            unselectedItemColor:
                Colors.pink, //當前爲選中的BottomNavigationBarItem.labels 的顏色
            unselectedLabelStyle: TextStyle(
                color: Colors.green, fontSize: 15), //未選中時的字體樣式，設置了並無生效
            showSelectedLabels: true, //選中的時候的字體樣式，設置了並無生效
          ),
        ));
  }
}



複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程