大多數 App 中都會有底部導航欄,通過底部導航欄切換實現不同頁面之間的切換。在Flutter 中提供了 BottomNavigationBar組件實現底部導航。本篇介紹通過 BottomNavigationBar和 IndexedStack構建最爲常見的 App 頁面框架。
最終實現的結果如上圖所示,頂部共用一個導航欄,底部有四個圖標導航,點擊對應的圖標跳轉到對應的頁面。
圖標準備
本次例程需要4個圖標,2種顏色,可以從 iconfont 中找到自己需要的圖標下載不同的顏色使用。然後在 pubspec.yaml 中的 assets 指定素材所在目錄。需要注意的是如果是 png 文件直接指定整個目錄即可,但如果是 jpg 格式,則需要同時指定文件名及後綴。
BottomNavigationBar 簡介
BottomNavigationBar的構造函數如下:
BottomNavigationBar({
Key? key,
required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation,
this.type,
Color? fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color? selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme,
this.unselectedIconTheme,
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels,
this.showUnselectedLabels,
this.mouseCursor,
})
其中常用的屬性爲:
- items:及對應的頁面組件數組
- currentIndex:默認顯示第幾個頁面
- type:組件類型,使用BottomNavigationBarType枚舉,有 fixed 和 shifting 兩種。fixed 是圖標固定位置,而 shifting 的圖標點擊後會有一個漂移效果,可以實際試一下,一般用fixed 比較多。
- onTap:點擊後的事件,一般用這個更新狀態數據,以便更新頁面。
其他屬性用於控制樣式的,可以根據實際需要設置圖標大小,主題色,字體等參數。
構建項目頁面結構
首先,新建四個業務頁面,分別是 dynamic.dart,message.dart,category.dart 和 mine.dart,分別對應動態、消息、分類瀏覽和個人中心四個頁面。目前這四個頁面很簡單,只是在頁面中間依次顯示“島上碼農”四個字。代碼都是類似的,以 dynamic 爲例:
import 'package:flutter/material.dart';
class DynamicPage extends StatelessWidget {
const DynamicPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('島'),
),
);
}
}
注意的是這裏的 Scaffold 沒有 AppBar 了,這是因爲在首頁已經有了,如果再有 AppBar 就會出現兩個。
其次,新建首頁,用於管理四個業務頁面,命名爲 app.dart。app.dart 使用了 BottomNavigationBar 管理四個業務頁面的切換。
import 'package:flutter/material.dart';
import 'dynamic.dart';
import 'message.dart';
import 'category.dart';
import 'mine.dart';
class AppHomePage extends StatefulWidget {
AppHomePage({Key key}) : super(key: key);
@override
_AppHomePageState createState() => _AppHomePageState();
}
class _AppHomePageState extends State<AppHomePage> {
int _index = 0;
List<Widget> _homeWidgets = [
DynamicPage(),
MessagePage(),
CategoryPage(),
MinePage(),
];
void _onBottomNagigationBarTapped(index) {
setState(() {
_index = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('島上碼農'),
),
body: IndexedStack(
index: _index,
children: _homeWidgets,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _index,
onTap: _onBottomNagigationBarTapped,
items: [
_getBottomNavItem(
'動態', 'images/dynamic.png', 'images/dynamic-hover.png', 0),
_getBottomNavItem(
' 消息', 'images/message.png', 'images/message-hover.png', 1),
_getBottomNavItem(
'分類瀏覽', 'images/category.png', 'images/category-hover.png', 2),
_getBottomNavItem(
'個人中心', 'images/mine.png', 'images/mine-hover.png', 3),
],
),
);
}
BottomNavigationBarItem _getBottomNavItem(
String title, String normalIcon, String pressedIcon, int index) {
return BottomNavigationBarItem(
icon: _index == index
? Image.asset(
pressedIcon,
width: 32,
height: 28,
)
: Image.asset(
normalIcon,
width: 32,
height: 28,
),
label: title,
);
}
}
這裏關鍵的地方有兩個,一是使用的 IndexedStack,這是一個管理頁面顯示層級的容器。使用 index 屬性確定當前容器裏那個頁面在最頂上,容器裏的頁面通過 children 屬性設置,要求是一個 Widget 數組。因此,邏輯就是當 BottomNavigationBar 中的圖標被點擊後,對應點擊事件會回調 onTap屬性指定的方法,將當前的點擊索引值傳遞迴調函數,因此可以利用這個方式控制 IndexedStack 的頁面層級切換。
最後,使用了狀態變量_index 存儲IndexedStatck當前顯示頁面的索引值,然後當 BottomNavigationBar的圖標點擊事件發生後,在回調函數中使用 setState 更新狀態變量_index 來刷新當前界面。
簡化入口
main.dart 是入口文件,應當做最基礎的配置和全局初始化配置,而不應該有業務代碼,因此可以簡化爲從main 方法加載首頁即可。通過這種方式可以讓 main.dart 文件即爲簡潔。這也是在開發的時候需要注意的地方,將不相關的代碼剝離,相關的代碼聚合,即所謂的“高內聚,低耦合”原則。
import 'package:flutter/material.dart';
import 'app.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App 框架',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AppHomePage(),
);
}
}
代碼複用
寫代碼的時候要注意複用,在這裏將構建 BottomNavigationBar
元素抽離出了一個構建方法_getBottomNavItem
,從而提高代碼的複用性和維護性,也可以避免 Flutter 的組件構建的 build
方法中出現過多的元素和嵌套,影響代碼的可讀性。