一、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 组件 )相关推荐

【Flutter】StatefulWidget 组件 ( PageView 组件 )
文章目录一.PageView 组件二.PageView 组件完整代码示例三. 相关资源一.PageView 组件 PageView 组件构造函数 : 构造函数中的可选参数就是 PageView ...
Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章一行代代码置灰应用?对就是这么干在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
Flutter 底部导航栏（Tab 页）的快速实现
Flutter 底部导航栏(Tab 页)的快速实现我们知道 Scaffold 实现了基本的 Material 布局.只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Sc ...
flutter底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
flutter在导航栏处实现对两个列表的点击事件
原理:通过Function实现index的回调导航栏代码 import 'dart:async'; import 'dart:convert'; import 'dart:developer'; i ...
Flutter底部导航栏BottomNavigationBar
BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择.类比于Android的底部导航栏,由Text文本和Icon图标组成. 这里创建一个List为显示内容提供容器: sta ...
Flutter | 透明导航栏 AppBar
除了将 backgroundColor 设置为 transparent,还需要将 shadowColor 设置为 transparent,或者把 elevation 设置为 0: appBar: Ap ...
Flutter底部导航栏的实现
效果实现先将自动生成的main.dart里面的代码删除,并创建app.dart文件作为app的入口文件 import 'package:flutter/material.dart'; import ...

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

文章目录

一、Drawer 组件

二、PageView 组件

三、完整代码示例

四、相关资源

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )相关推荐

最新文章

热门文章