前言
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架猫牡，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚邓线、騰訊的微信等淌友。
示意圖
示意圖
今天，我主要講解Flutter中布局方面的底部導(dǎo)航欄：BottomNavigationBar骇陈，希望你們會(huì)喜歡震庭。
目錄
示意圖
1. 簡介
底部導(dǎo)航欄控件，屬于 Scaffold 組件你雌。
配合使用 BottomNavigationBarItem ：底部導(dǎo)航欄要顯示的Item = 圖標(biāo) + 標(biāo)題
2. 屬性介紹
BottomNavigationBar({
Key key,
@required this.items, // 底部導(dǎo)航欄的顯示項(xiàng) = BottomNavigationBarItem類型的List
this.onTap, // 點(diǎn)擊導(dǎo)航欄子項(xiàng)時(shí)的回調(diào) = ValueChanged < int >
this.currentIndex = 0, // 當(dāng)前顯示項(xiàng)的下標(biāo) = int
BottomNavigationBarType type, // 底部導(dǎo)航欄的類型器联，有fixed和shifting兩個(gè)類型，顯示效果不一樣 = BottomNavigationBarType
this.fixedColor, // 底部導(dǎo)航欄type為fixed時(shí)導(dǎo)航欄的顏色婿崭，如果為空的話默認(rèn)使用ThemeData.primaryColor = Color
this.iconSize = 24.0, // BottomNavigationBarItem icon的大小 = double
})
const BottomNavigationBarItem({
@required this.icon, // 要顯示的圖標(biāo)控件拨拓，一般是Iocn
this.title, // 要顯示的標(biāo)題控件，一般是Text
Widget activeIcon, // 選中時(shí)要顯示的icon氓栈，一般是Icon
this.backgroundColor, // BottomNavigationBarType為shifting時(shí)的背景顏色
})
3. 使用步驟
// 需要在Scaffold內(nèi)部使用
Scaffold(
appBar: AppBar(
title: Text("底部導(dǎo)航欄"),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems, // 導(dǎo)航欄下標(biāo)item
currentIndex: currentIndex, // 當(dāng)前下標(biāo)
type: BottomNavigationBarType.fixed, // 點(diǎn)擊導(dǎo)航欄樣式
fixedColor: Colors.green, // 點(diǎn)擊icon顏色
iconSize: 15, // icon大小
onTap: (index) {
_changePage(index); // 點(diǎn)擊回調(diào)
},
),
body: pages[currentIndex], // 每個(gè)item的回調(diào)頁面
);
// 回調(diào)頁面
void _changePage(int index) {
// 若點(diǎn)擊的導(dǎo)航項(xiàng)不是當(dāng)前項(xiàng)渣磷，則切換
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
4. 實(shí)例講解
4.1 設(shè)置要回調(diào)的頁面
為了方便顯示，僅顯示一個(gè)文本
// 頁面1
import 'package:flutter/material.dart';
class PageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("PageA"),
);
}
}
// 頁面2
import 'package:flutter/material.dart';
class PageB extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("PageB"),
);
}
}
// 頁面3
import 'package:flutter/material.dart';
class PageC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("PageC"),
);
}
}
// 頁面4
import 'package:flutter/material.dart';
class PageD extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("PageD"),
);
}
}
4.2 核心代碼
main.dart
/**
* 導(dǎo)入庫
**/
import 'package:flutter/material.dart';
import 'PageA.dart';
import 'PageB.dart';
import 'PageC.dart';
import 'PageD.dart'; // Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyWidget(), // 返回一個(gè)Widget對(duì)象授瘦，用來定義當(dāng)前應(yīng)用打開的時(shí)候醋界，所顯示的界面
);
}
}
class MyWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyWidgetState();
}
}
class _MyWidgetState extends State<MyWidget> {
// 導(dǎo)航欄的item
final List<BottomNavigationBarItem> bottomNavItems = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
title: Text("首頁"),
),
BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
title: Text("消息"),
),
BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
title: Text("購物車"),
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
title: Text("個(gè)人中心"),
),
];
int currentIndex; // 當(dāng)前下標(biāo)
final pages = [PageA(), PageB(), PageC(), PageD()];// 下標(biāo)對(duì)應(yīng)顯示的界面
@override
void initState() {
super.initState();
currentIndex = 0;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("底部導(dǎo)航欄"),
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems, // 導(dǎo)航欄下標(biāo)item
currentIndex: currentIndex, // 當(dāng)前下標(biāo)
type: BottomNavigationBarType.fixed,
fixedColor: Colors.green,
iconSize: 15,
onTap: (index) {
_changePage(index); // 點(diǎn)擊回調(diào)
},
),
body: pages[currentIndex],
);
}
// 切換頁面
void _changePage(int index) {
// 若點(diǎn)擊的導(dǎo)航項(xiàng)不是當(dāng)前項(xiàng)切換
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
}
4.3 示意圖
總結(jié)
- 本文全面介紹了
Flutter的布局組件中頂部導(dǎo)航欄的實(shí)現(xiàn)：BottomNavigationBar - 接下來推出的文章祟身，我將繼續(xù)講解Flutter的相關(guān)知識(shí)，包括使用語法物独、實(shí)戰(zhàn)等袜硫，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力挡篓！
相關(guān)文章閱讀
Android開發(fā)：最全面婉陷、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡書官研！
不定期分享關(guān)于安卓開發(fā)的干貨秽澳，追求短、平戏羽、快担神，但卻不缺深度。
