1. 寫在前面
在上篇文章中介紹了Flutter中的Appbar組件，今天繼續(xù)學(xué)習(xí)【Flutter】基礎(chǔ)組件中的BottomNavigationBar組件。
- 【基礎(chǔ)語法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart數(shù)據(jù)類型之num
【Flutter】Dart數(shù)據(jù)類型之String
【Flutter】Dart的數(shù)據(jù)類型list&Map(數(shù)組和字典)
【Flutter】Dart的方法中的可選參數(shù)、方法作為參數(shù)傳遞
【Flutter】Dart的工廠構(gòu)造方法&單例對象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么嗎？
- [基礎(chǔ)組件合集]
【Flutter】基礎(chǔ)組件【02】Container
【Flutter】基礎(chǔ)組件【03】Scaffold
【Flutter】基礎(chǔ)組件【04】Row/Column
2. BottomNavigationBar
2. 1 BottomNavigationBar簡介
BottomNavigationBar是屬于 Scaffold 中的一個位于底部的控件，這和我們 iOS 中的 tabbar 很像，可以切換不同的模塊。BottomNavigationBar通常是和 BottomNavigationBarItem 配合一起使用的。
我們還是以微信的框架作為例子，現(xiàn)在讓我們?nèi)ヒ黄饘崿F(xiàn)一下吧！
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 1;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("微信"),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
//BottomNavigationBar 的點擊事件
onTap: (flag) {
print("flag = $flag");
setState(() {
_currentIndex = flag;
});
},
fixedColor: Colors.green,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image.asset(
'images/tabbar_chat.png',
height: 20,
width: 20,
),
activeIcon: Image.asset(
'images/tabbar_chat_hl.png',
height: 20,
width: 20,
),
label: ('微信'),
),
const BottomNavigationBarItem(
icon: Icon(Icons.bookmark), label: ('通訊錄')),
const BottomNavigationBarItem(icon: Icon(Icons.history), label: ('發(fā)現(xiàn)')),
const BottomNavigationBarItem(
icon: Icon(Icons.person_outline), label: ('我')),
],
)
);
}
}
我這里是工程里面導(dǎo)入了圖片，如果你沒有圖片，可以使用系統(tǒng)的圖標(biāo)也是可以的，反正就是一個 demo隨便弄個圖標(biāo)表達(dá)一下意思。不知道到怎么設(shè)置圖片的看這里??【Flutter】基礎(chǔ)組件【05】Image
- BottomNavigationBar效果如下：
我們這里需要切換
BottomNavigationBar,所以需要改變狀態(tài)，用的是StatefulWidget。改變的點擊事件方法是onTap，里面改變點擊的下標(biāo)就可以，實現(xiàn)切換頁面的效果了。
_currentIndex的改變一定要包裹在setState()方法里面才有效。
2.2 BottomNavigationBar屬性
- items：底部導(dǎo)航欄的顯示項，
- onTap：點擊導(dǎo)航欄子項時的回調(diào)
- currentIndex：當(dāng)前顯示項的下標(biāo)
- type：底部導(dǎo)航欄的類型，有fixed和shifting兩個類型，顯示效果不一樣
- fixedColor：底部導(dǎo)航欄type為fixed時導(dǎo)航欄的顏色，默認(rèn)使用ThemeData.primaryColor
- iconSize：BottomNavigationBarItem icon的大小
- backgroundColor：BottomNavigationBar的背景顏色
- selectedFontSize: 選中字體大小
- selectedItemColor: 選中字體顏色
- selectedIconTheme: 選中Icon的主題
- selectedLabelStyle: 選中字體的樣式
- unselectedFontSize: 未選中字體大小
- unselectedItemColor: 未選中字體顏色
- unselectedIconTheme: 未選中Icon的主題
- unselectedLabelStyle: 未選中字體的樣式
2.3.BottomNavigationBarItem屬性
- icon：要顯示的圖標(biāo)控件
- title：要顯示的標(biāo)題控件
- activeIcon：選中時要顯示的icon
- backgroundColor：背景顏色，BottomNavigationBarType為shifting時， BottomNavigationBar的背景顏色，會覆蓋BottomNavigationBar.backgroundColor
有興趣的小伙伴，自己去試試吧！這里就不一一演示了！
3. 寫在后面
關(guān)注我，更多內(nèi)容持續(xù)輸出
?? 喜歡就點個贊吧????
?? 覺得有收獲的，可以來一波 收藏+關(guān)注，以免你下次找不到我????
??歡迎大家留言交流，批評指正，
轉(zhuǎn)發(fā)請注明出處，謝謝支持！??
