文章目錄

• 一、Drawer 組件
• 二、PageView 組件
• 三、完整代碼示例
• 四、相關資源

一、Drawer 組件

---

Scaffold 組件中的 drawer 參數 , 就是設置側拉導航欄菜單的 , 為其賦值一個 Drawer 組件 ;

Drawer 組件就是側拉菜單 , 該組件的 child 設置一個 ListView 組件 , 在列表中設置 DrawerHeader , ListTile 等子組件 ;

class Drawer extends StatelessWidget {const Drawer({Key? key,this.elevation = 16.0,this.child,this.semanticLabel,}) : assert(elevation != null && elevation >= 0.0),super(key: key); }

側拉菜單示例 :

drawer: Drawer(child: ListView(children: datas.map((TabData data) {/// 單個按鈕條目return ListTile(title: Text(data.title),/// 點擊事件onTap: () {/// 跳轉到對應的導航頁面_pageController.jumpToPage(data.index);_currentIndex = data.index;/// 關閉側拉菜單Navigator.pop(context);},);}).toList(),), ),

二、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(DrawerWidget()); }class DrawerWidget extends StatefulWidget {@override_DrawerWidgetState createState() => _DrawerWidgetState(); }class _DrawerWidgetState extends State<DrawerWidget>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(),),drawer: Drawer(child: ListView(children: datas.map((TabData data) {/// 單個按鈕條目return ListTile(title: Text(data.title),/// 點擊事件onTap: () {/// 跳轉到對應的導航頁面_pageController.jumpToPage(data.index);_currentIndex = data.index;/// 關閉側拉菜單Navigator.pop(context);},);}).toList(),),),),);} }/// 封裝導航欄的圖標與文本數據 class TabData {/// 導航數據構造函數const TabData({this.index, this.title, this.icon});/// 導航標題final String title;/// 導航圖標final IconData icon;/// 索引final int index; }/// 導航欄數據集合 const List<TabData> datas = const <TabData>[const TabData(index: 0, title: '3D', icon: Icons.threed_rotation),const TabData(index: 1, title: '打印機', icon: Icons.print),const TabData(index: 2, title: '動畫', icon: Icons.animation),const TabData(index: 3, title: '變換', icon: Icons.transform),const TabData(index: 4, title: '高度', icon: Icons.height),const TabData(index: 5, title: '描述', icon: Icons.description),const TabData(index: 6, title: '向前', icon: Icons.forward),const TabData(index: 7, title: '相機', icon: Icons.camera),const TabData(index: 8, title: '設置', icon: Icons.settings),const TabData(index: 9, 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/16277725 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

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

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