文章目錄

• 一、Scaffold 組件
• 二、底部導航欄整體架構
• 三、BottomNavigationBar 底部導航欄
• 四、BottomNavigationBarItem 導航欄條目
• 五、PageView 組件
• 六、完整代碼示例
• 七、相關資源

一、Scaffold 組件

---

Flutter 中的 Scaffold 組件實現了基礎的材料設計 ( Material Design ) 可視化布局結構 ;

Scaffold 提供了顯示左側側拉導航欄 , 底部導航 , 浮動按鈕等 API ;

Scaffold 構造函數如下 :

class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key? key,this.appBar, // 頂部的標題欄this.body, // 中間顯示的核心部分 , 標題欄下面的部分都是 this.floatingActionButton, // 右下角的懸浮按鈕 ( 可改變位置 )this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.drawer, // 側拉導航欄 this.onDrawerChanged,this.endDrawer,this.onEndDrawerChanged,this.bottomNavigationBar,this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomInset,this.primary = true,this.drawerDragStartBehavior = DragStartBehavior.start,this.extendBody = false,this.extendBodyBehindAppBar = false,this.drawerScrimColor,this.drawerEdgeDragWidth,this.drawerEnableOpenDragGesture = true,this.endDrawerEnableOpenDragGesture = true,this.restorationId,}) : assert(primary != null),assert(extendBody != null),assert(extendBodyBehindAppBar != null),assert(drawerDragStartBehavior != null),super(key: key);

二、底部導航欄整體架構

---

通過設置 Scaffold 組件的 bottomNavigationBar 字段 , 為其設置一個 BottomNavigationBar 底部導航欄組件 , 該底部導航欄的 item 設置圖標與文字組件數組 , onTap 字段設置 ValueChanged<int> 點擊回調方法 , 通過該方法設置當前選擇的頁面索引值 ;

Scaffold 組件的主題 body 字段設置 PageView 組件 , 該組件主要設置 PageController? controller 和 List<Widget> children 字段 , PageController 用于控制 PageView 中的頁面跳轉 , children 中就是 PageView 封裝的多個界面組件 , 同一時間只顯示一個 ;

三、BottomNavigationBar 底部導航欄

---

通過 Scaffold 組件的 bottomNavigationBar 字段 , 可以設置底部導航欄菜單 , 設置一個 BottomNavigationBar 組件 ;

BottomNavigationBar 組件中可設置 int currentIndex 當前的索引 , ValueChanged? onTap 點擊事件 ,

BottomNavigationBar 組件需要設置組件的類型 , 在 BottomNavigationBarType? type 字段設置 , 有兩個可選類型 , fixed 和 shifting ;

enum BottomNavigationBarType {/// BottomNavigationBar 導航欄底部的 BottomNavigationBarItem 寬度不變fixed,/// BottomNavigationBar 導航欄底部的 BottomNavigationBarItem 組件的位置和大小 ,/// 都會根據當前點擊的選項而改變 , /// 改變的時候有切換動畫/// 選中的狀態下顯示底部圖標的文本 /// 不選中的狀態下隱藏底部的文本內容 shifting, }

BottomNavigationBar 的 List<BottomNavigationBarItem> items 字段接受 BottomNavigationBarItem 組件集合 ;

底部導航欄點擊事件 , ValueChanged<int>? onTap 字段設置點擊事件 , 傳入的參數是點擊的底部導航欄索引值 ;

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,this.enableFeedback,}) : assert(items != null),assert(items.length >= 2),assert(items.every((BottomNavigationBarItem item) => item.title != null) ||items.every((BottomNavigationBarItem item) => item.label != null),'Every item must have a non-null title or label',),assert(0 <= currentIndex && currentIndex < items.length),assert(elevation == null || elevation >= 0.0),assert(iconSize != null && iconSize >= 0.0),assert(selectedItemColor == null || fixedColor == null,'Either selectedItemColor or fixedColor can be specified, but not both'),assert(selectedFontSize != null && selectedFontSize >= 0.0),assert(unselectedFontSize != null && unselectedFontSize >= 0.0),selectedItemColor = selectedItemColor ?? fixedColor,super(key: key);

代碼示例 :

BottomNavigationBar(/// 設置當前的導航頁面索引currentIndex: _currentIndex,/// 導航欄按鈕點擊事件onTap: (pageIndex) {/// 跳轉到對應的導航頁面_pageController.jumpToPage(pageIndex);setState(() {_currentIndex = pageIndex;});},/// 圖標和文本位置不變type: BottomNavigationBarType.fixed,/// 底部導航欄的按鈕條目items: datas.map((TabData data) {/// 單個按鈕條目return BottomNavigationBarItem(// 普通狀態下的圖標 , 綠色icon: Icon(data.icon,color: Colors.green,),/// 選中狀態下的圖標 , 紅色activeIcon: Icon(data.icon,color: Colors.red,),/// 與 text 類似 , 只能設置一個label: data.title,);}).toList(), ),

四、BottomNavigationBarItem 導航欄條目

---

BottomNavigationBar 中需要設置 BottomNavigationBarItem 數組元素 , 這就需要創建若干 BottomNavigationBarItem 組件 ;

BottomNavigationBarItem 中可以設置

• 默認圖標 Widget icon
• 底部文案 Widget? title
• 選中狀態圖標 Widget activeIcon
• 背景顏色 Color? backgroundColor

BottomNavigationBarItem 組件構造函數 :

const BottomNavigationBarItem({required this.icon,@Deprecated('Use "label" instead, as it allows for an improved text-scaling experience. ''This feature was deprecated after v1.19.0.')this.title,this.label,Widget? activeIcon,this.backgroundColor,this.tooltip,}) : activeIcon = activeIcon ?? icon,assert(label == null || title == null),assert(icon != null);

五、PageView 組件

---

PageView 組件最重要的兩個字段 :

• PageController? controller
• List<Widget> children

PageController 用于控制 PageView 的跳轉 , PageController 主要作用是調用 void jumpToPage(int page) 方法 , 進行頁面跳轉 ;

jumpToPage 頁面跳轉在底部菜單欄的 onTap 點擊事件中調用 , 更新當前頁面后 , 需要調用 setState 方法更新界面 ;

PageView 構造函數 :

PageView({Key? key,this.scrollDirection = Axis.horizontal, // 設置滾動方向 垂直 / 水平 this.reverse = false, // 反向滾動 PageController? controller, // 滾動控制類 this.physics, // 滾動邏輯 , 不滾動 / 滾動 / 滾動到邊緣是否反彈 this.pageSnapping = true, // 如果設置 false , 則無法進行頁面手勢捕捉 this.onPageChanged, // 頁面切換時回調該函數 List<Widget> children = const <Widget>[],this.dragStartBehavior = DragStartBehavior.start,this.allowImplicitScrolling = false,this.restorationId,this.clipBehavior = Clip.hardEdge,}) : assert(allowImplicitScrolling != null),assert(clipBehavior != null),controller = controller ?? _defaultPageController,childrenDelegate = SliverChildListDelegate(children),super(key: key);

PageView 代碼示例 :

/// 滑動組件 , 界面的核心元素 PageView(/// 控制跳轉翻頁的控制器controller: _pageController,/// Widget 組件數組 , 設置多個 Widget 組件children: datas.map((TabData data) {return Padding(/// 內邊距 20padding: const EdgeInsets.all(20.0),/// PageView 中單個顯示的組件child: TabContent(data: data),);}).toList(),physics: NeverScrollableScrollPhysics(), ),

六、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';/// 底部導航欄示例 void main() {runApp(BottomNavigatorWidget()); }class BottomNavigatorWidget extends StatefulWidget {@override_BottomNavigatorWidgetState createState() => _BottomNavigatorWidgetState(); }class _BottomNavigatorWidgetState extends State<BottomNavigatorWidget>with SingleTickerProviderStateMixin {/// 當前的索引值int _currentIndex = 0;/// PageView 控制器 , 用于控制 PageViewvar _pageController = PageController(/// 初始索引值initialPage: 0,);@overridevoid dispose() {super.dispose();/// 銷毀 PageView 控制器_pageController.dispose();}@overrideWidget build(BuildContext context) {/// 根組件return MaterialApp(home: Scaffold(/// 滑動組件 , 界面的核心元素body: PageView(/// 控制跳轉翻頁的控制器controller: _pageController,/// Widget 組件數組 , 設置多個 Widget 組件children: datas.map((TabData data) {return Padding(/// 內邊距 20padding: const EdgeInsets.all(20.0),/// PageView 中單個顯示的組件child: TabContent(data: data),);}).toList(),physics: NeverScrollableScrollPhysics(),),bottomNavigationBar: BottomNavigationBar(/// 設置當前的導航頁面索引currentIndex: _currentIndex,/// 導航欄按鈕點擊事件onTap: (pageIndex) {/// 跳轉到對應的導航頁面_pageController.jumpToPage(pageIndex);setState(() {_currentIndex = pageIndex;});},/// 圖標和文本位置不變type: BottomNavigationBarType.fixed,/// 底部導航欄的按鈕條目items: datas.map((TabData data) {/// 單個按鈕條目return BottomNavigationBarItem(// 普通狀態下的圖標 , 綠色icon: Icon(data.icon,color: Colors.green,),/// 選中狀態下的圖標 , 紅色activeIcon: Icon(data.icon,color: Colors.red,),/// 與 text 類似 , 只能設置一個label: data.title,);}).toList(),),),);} }/// 封裝導航欄的圖標與文本數據 class TabData {/// 導航數據構造函數const TabData({this.title, this.icon});/// 導航標題final String title;// 導航圖標final IconData icon; }/// 導航欄數據集合 const List<TabData> datas = const <TabData>[const TabData(title: '3D', icon: Icons.threed_rotation),const TabData(title: '打印機', icon: Icons.print),const TabData(title: '動畫', icon: Icons.animation),const TabData(title: '變換', icon: Icons.transform),const TabData(title: '高度', icon: Icons.height),const TabData(title: '描述', icon: Icons.description),const TabData(title: '向前', icon: Icons.forward),const TabData(title: '相機', icon: Icons.camera),const TabData(title: '設置', icon: Icons.settings),const TabData(title: '學位', icon: Icons.school), ];/// 通過 TabBar 導航欄切換展示的主要內容 /// 用于在 TabBarView 中顯示的組件 class TabContent extends StatelessWidget {const TabContent({Key key, this.data}) : super(key: key);/// 根據該數據條目生成組件final TabData data;@overrideWidget build(BuildContext context) {TextStyle textStyle = TextStyle(color: Colors.yellow, fontSize: 50);return Card(/// 設置 20 像素邊距margin: EdgeInsets.all(20),/// 設置陰影elevation: 10,/// 卡片顏色黑色color: Colors.black,/// 卡片中的元素居中顯示child: Center(/// 垂直方向的線性布局child: Column(/// 在主軸 ( 垂直方向 ) 占據的大小mainAxisSize: MainAxisSize.min,/// 居中顯示crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[/// 設置圖標Icon(data.icon, size: 128.0, color: Colors.green),/// 設置文字Text(data.title, style: TextStyle(color: Colors.yellow, fontSize: 50)),],),),);} }

運行效果 :

七、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_frame ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16276633 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。