文章目錄

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

一、Drawer 組件

---

Scaffold 組件中的 drawer 參數(shù) , 就是設(shè)置側(cè)拉導(dǎo)航欄菜單的 , 為其賦值一個 Drawer 組件 ;

Drawer 組件就是側(cè)拉菜單 , 該組件的 child 設(shè)置一個 ListView 組件 , 在列表中設(shè)置 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); }

側(cè)拉菜單示例 :

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

二、PageView 組件

---

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

• PageController? controller
• List<Widget> children

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

jumpToPage 頁面跳轉(zhuǎn)在底部菜單欄的 onTap 點擊事件中調(diào)用 , 更新當(dāng)前頁面后 , 需要調(diào)用 setState 方法更新界面 ;

PageView 構(gòu)造函數(shù) :

PageView({Key? key,this.scrollDirection = Axis.horizontal, // 設(shè)置滾動方向 垂直 / 水平 this.reverse = false, // 反向滾動 PageController? controller, // 滾動控制類 this.physics, // 滾動邏輯 , 不滾動 / 滾動 / 滾動到邊緣是否反彈 this.pageSnapping = true, // 如果設(shè)置 false , 則無法進行頁面手勢捕捉 this.onPageChanged, // 頁面切換時回調(diào)該函數(shù) 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(/// 控制跳轉(zhuǎn)翻頁的控制器controller: _pageController,/// Widget 組件數(shù)組 , 設(shè)置多個 Widget 組件children: datas.map((TabData data) {return Padding(/// 內(nèi)邊距 20padding: const EdgeInsets.all(20.0),/// PageView 中單個顯示的組件child: TabContent(data: data),);}).toList(),physics: NeverScrollableScrollPhysics(), ),

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';/// 側(cè)拉導(dǎo)航欄示例 void main() {runApp(DrawerWidget()); }class DrawerWidget extends StatefulWidget {@override_DrawerWidgetState createState() => _DrawerWidgetState(); }class _DrawerWidgetState extends State<DrawerWidget>with SingleTickerProviderStateMixin {/// 當(dāng)前的索引值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(/// 控制跳轉(zhuǎn)翻頁的控制器controller: _pageController,/// Widget 組件數(shù)組 , 設(shè)置多個 Widget 組件children: datas.map((TabData data) {return Padding(/// 內(nèi)邊距 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: () {/// 跳轉(zhuǎn)到對應(yīng)的導(dǎo)航頁面_pageController.jumpToPage(data.index);_currentIndex = data.index;/// 關(guān)閉側(cè)拉菜單Navigator.pop(context);},);}).toList(),),),),);} }/// 封裝導(dǎo)航欄的圖標(biāo)與文本數(shù)據(jù) class TabData {/// 導(dǎo)航數(shù)據(jù)構(gòu)造函數(shù)const TabData({this.index, this.title, this.icon});/// 導(dǎo)航標(biāo)題final String title;/// 導(dǎo)航圖標(biāo)final IconData icon;/// 索引final int index; }/// 導(dǎo)航欄數(shù)據(jù)集合 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: '設(shè)置', icon: Icons.settings),const TabData(index: 9, title: '學(xué)位', icon: Icons.school), ];/// 通過 TabBar 導(dǎo)航欄切換展示的主要內(nèi)容 /// 用于在 TabBarView 中顯示的組件 class TabContent extends StatelessWidget {const TabContent({Key key, this.data}) : super(key: key);/// 根據(jù)該數(shù)據(jù)條目生成組件final TabData data;@overrideWidget build(BuildContext context) {TextStyle textStyle = TextStyle(color: Colors.yellow, fontSize: 50);return Card(/// 設(shè)置 20 像素邊距margin: EdgeInsets.all(20),/// 設(shè)置陰影elevation: 10,/// 卡片顏色黑色color: Colors.black,/// 卡片中的元素居中顯示child: Center(/// 垂直方向的線性布局child: Column(/// 在主軸 ( 垂直方向 ) 占據(jù)的大小mainAxisSize: MainAxisSize.min,/// 居中顯示crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[/// 設(shè)置圖標(biāo)Icon(data.icon, size: 128.0, color: Colors.green),/// 設(shè)置文字Text(data.title, style: TextStyle(color: Colors.yellow, fontSize: 50)),],),),);} }

運行效果展示 :

四、相關(guān)資源

---

參考資料 :

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

重要的專題 :

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

博客源碼下載 :

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。