文章目錄

• 一、Scaffold 組件
• 二、實現頂部導航欄
• 三、DefaultTabController 導航標簽控制組件
• 四、TabBar 導航按鈕組件
• 五、Tab 標簽組件
• 六、TabBarView 導航主體內容組件
• 七、完整代碼示例
• 八、相關資源

一、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);

二、實現頂部導航欄

---

實現頂部導航欄需要三個組件 :

• TabBar : 該組件就是導航欄組件 , 設置多個圖標按鈕 ;
• TabBarView : 該組件是被導航的組件 , 設置多個布局結構 , 同時只能顯示一個 ;
• DefaultTabController : 該組件用于關聯控制 TabBar 和 TabBarView 組件 ;

界面組件中 , 根組件肯定是 MaterialApp , 然后下一層組件就是 DefaultTabController , 使用 DefaultTabController 包裹 Scaffold , 然后在 Scaffold 中定義的 TabBar 和 TabBarView 就會被關聯再一起 ;

注意三個相等的值 :

DefaultTabController length 長度

等于

TabBar 子組件個數

等于

TabBarView 子組件個數

Google 官方給出的文檔 :

[TabBar], which displays a row of tabs. ( 顯示一行標簽 )
[TabBarView], which displays a widget for the currently selected tab. ( 顯示當前選中的標簽對應的組件 )
[TabController], which coordinates tab selection between a [TabBar] and a [TabBarView]. ( 用于關聯標簽與選項卡 )
https://material.io/design/components/tabs.html

三、DefaultTabController 導航標簽控制組件

---

DefaultTabController 用于關聯 TabBar 和 TabBarView 組件 ;

由于 TabBar 中的組件都是無狀態組件 , 或者不同的父類組件 , 導致創建 TabController 不方便時 , 就會使用該 DefaultTabController 組件 ;

DefaultTabController 組件的 length 參數必須不為空 , 并且大于 1 , length 的個數必須等于 TabBar 和 TabBarView 的個數 ;

initialIndex 初始索引值參數必須不能為空

DefaultTabController 構造函數原型 :

/// 為給定的子組件創建一個默認的導航控制器////// length 參數必須不為空 , 并且大于 1 ;/// length 的個數必須等于 TabBar 和 TabBarView 的個數 ;/// /// initialIndex 初始索引值參數必須不能為空 const DefaultTabController({Key? key,required this.length,this.initialIndex = 0,required this.child,}) : assert(initialIndex != null),assert(length >= 0),assert(length == 0 || (initialIndex >= 0 && initialIndex < length)),super(key: key);

Google 官方給出的代碼示例 :

class MyDemo extends StatelessWidget {final List<Tab> myTabs = <Tab>[Tab(text: 'LEFT'),Tab(text: 'RIGHT'),];@overrideWidget build(BuildContext context) {return DefaultTabController(length: myTabs.length,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: myTabs,),),body: TabBarView(children: myTabs.map((Tab tab) {final String label = tab.text.toLowerCase();return Center(child: Text('This is the $label tab',style: const TextStyle(fontSize: 36),),);}).toList(),),),);} }

四、TabBar 導航按鈕組件

---

TabBar 組件主要用于封裝導航欄的圖標按鈕 , 主要設置一組 Tab 組件 ;

通常放在 AppBar 組件的底部 , 也就是賦值給 AppBar.bottom , 與 TabBarView 結合起來使用 ;

TabBar 中 Tab 子組件的個數 , TabController 中的 length 長度 , TabBarView 中子組件的個數 , 三者必須相等 ;

TabBar 構造函數 :

const TabBar({Key? key,required this.tabs,this.controller,this.isScrollable = false,this.indicatorColor,this.automaticIndicatorColorAdjustment = true,this.indicatorWeight = 2.0,this.indicatorPadding = EdgeInsets.zero,this.indicator,this.indicatorSize,this.labelColor,this.labelStyle,this.labelPadding,this.unselectedLabelColor,this.unselectedLabelStyle,this.dragStartBehavior = DragStartBehavior.start,this.overlayColor,this.mouseCursor,this.enableFeedback,this.onTap,this.physics,}) : assert(tabs != null),assert(isScrollable != null),assert(dragStartBehavior != null),assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),assert(indicator != null || (indicatorPadding != null)),super(key: key);

官方提供的 TabBar 代碼示例 :

late TabController _tabController;@overridevoid initState() {super.initState();_tabController = TabController(length: 3, vsync: this);}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('TabBar Widget'),bottom: TabBar(controller: _tabController,tabs: <Widget>[Tab(icon: Icon(Icons.cloud_outlined),),Tab(icon: Icon(Icons.beach_access_sharp),),Tab(icon: Icon(Icons.brightness_5_sharp),),],),),body: TabBarView(controller: _tabController,children: <Widget>[Center(child: Text('It\'s cloudy here'),),Center(child: Text('It\'s rainy here'),),Center(child: Text('It\'s sunny here'),),],),);}

五、Tab 標簽組件

---

Tab 組件是 TabBar 組件的子組件 , 每個 TabBar 組件需要設置若干個 Tab 組件 ( 至少一個 ) ;

Tab 構造函數 :

/// 創建一個材料設計風格的選項卡.////// 至少設置一個 text 文本和 icon 圖標 child 必須為非空 .const Tab({Key? key,this.text,this.icon,this.iconMargin = const EdgeInsets.only(bottom: 10.0),this.child,}) : assert(text != null || child != null || icon != null),assert(text == null || child == null),super(key: key);

代碼示例 :

bottom: TabBar(/// 可左右滑動isScrollable: true,/// 設置頂部導航欄的圖標tabs: datas.map((TabData data) {/// 導航欄的圖標及文本return Tab(text: data.title,icon: Icon(data.icon),);}).toList(), ),

六、TabBarView 導航主體內容組件

---

顯示 TabBar 中當前選中的 Tab 標簽對應的組件 ;

TabBarView 初始化時 , 可以只為其設置 children 參數 , 類型是 List<Widget> ;

TabBarView 構造函數 :

const TabBarView({Key? key,required this.children,this.controller,this.physics,this.dragStartBehavior = DragStartBehavior.start,}) : assert(children != null),assert(dragStartBehavior != null),super(key: key);

七、完整代碼示例

---

import 'package:flutter/material.dart';void main() {runApp(TabBarWidget()); }/// 導航欄數據集合 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), ];/// 頂部導航欄核心頁面 class TabBarWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {/// 材料設計應用組件 , 一般作為頁面的根組件return MaterialApp(/// 用于將 TabBar 和 TabBarView 封裝起來home: DefaultTabController(length: datas.length,/// 主界面框架child: Scaffold(/// 標題欄appBar: AppBar(/// 標題欄標題title: const Text('頂部導航欄'),/// 設置頂部導航欄bottom: TabBar(/// 可左右滑動isScrollable: true,/// 設置頂部導航欄的圖標tabs: datas.map((TabData data) {/// 導航欄的圖標及文本return Tab(text: data.title,icon: Icon(data.icon),);}).toList(),),),/// 導航欄控制的左右輪播的組件body: TabBarView(/// 界面顯示的主體 , 通過 TabBar 切換不同的本組件顯示children: datas.map((TabData choice) {return Padding(padding: const EdgeInsets.all(10.0),child: TabContent(data: choice),);}).toList(),),),),);} }/// 通過 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)),],),),);} }/// 封裝導航欄的圖標與文本數據 class TabData {/// 導航數據構造函數const TabData({this.title, this.icon});/// 導航標題final String title;// 導航圖標final IconData icon; }

運行效果 :

八、相關資源

---

參考資料 :

• 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/16245277 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )的全部內容，希望文章能夠幫你解決所遇到的問題。

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