一、控制元件介紹
一個底部導航欄控制元件，用於進行不同檢視的切換，底部導航欄可以由文字、圖示 或者兩者結合的形式組成，底部導航欄統籌與Scaffold結合使用，它通常作為Scaffold.bottomNavigationBar引數提供。
二、使用方法
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時的背景顏色
})
複製程式碼二、常用屬性
1.設定導航欄的子item控制元件，放入導航欄的控制元件item列表長度items必須至少為2，每個專案的圖示和標題不得為空
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點選的回撥
onTap: (index) {
//點選導航欄子item的時候的
setState(() {
_tabIndex = index;
});
},
複製程式碼3.底部導航欄的型別，有fixed和shifting兩個型別，不同型別顯示效果不一樣
type: BottomNavigationBarType.fixed, //底部導航欄的型別，有fixed和shifting兩個型別，不同型別顯示效果不一樣
複製程式碼4.選中的時候的字型顏色，不能跟selectedItemColor 一起用
fixedColor: Colors.black, //選中的時候的字型顏色，不能跟selectedItemColor 一起用
複製程式碼5.設定icon大小
iconSize: 200.0, // icon的大小
複製程式碼6.當前活動BottomNavigationBarItem的專案索引。
currentIndex: _tabIndex
複製程式碼7.選中的tab的字型的大小
selectedFontSize: 30, //選中的tab的字型的大小
複製程式碼8.導航欄背景顏色
backgroundColor: Colors.lightBlueAccent, //導航欄背景顏色
複製程式碼9.選中時的子Item的樣式，這個不能跟BottomNavigationBarItem Icon 的colors 一起用，否則會以Icon 的colors為準，主題設定的不會生效，並且icon必須為官方的icon為主，否則也無法生效
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, //選中的時候的字型樣式，設定了並沒有生效
複製程式碼三、總結
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);
}
複製程式碼四、一個完整的例子
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, //選中的時候的字型樣式，設定了並沒有生效
),
));
}
}
複製程式碼