Flutter抽屉导航插件easydrawer的使用
Flutter抽屉导航插件easydrawer的使用
在Flutter中，easydrawer 是一个功能强大的抽屉导航插件，它允许开发者轻松创建带有子菜单和超子菜单的复杂侧边栏。通过该插件，您可以为应用构建具有层次结构的导航界面。
以下是 easydrawer 的使用方法及完整示例代码：
使用步骤
-
添加依赖
在pubspec.yaml文件中添加easydrawer依赖：dependencies: easydrawer: ^1.0.0然后运行
flutter pub get来安装依赖。 -
创建抽屉菜单数据结构
使用List<Map<String, dynamic>>定义抽屉菜单的数据结构，每个菜单项可以包含标题、图标、是否为子菜单、事件回调等属性。 -
初始化抽屉组件
将菜单数据传递给CommonDrawer组件，并设置其他样式参数（如头像、文字、颜色等）。 -
集成到应用中
将CommonDrawer集成到Scaffold的drawer属性中。
示例代码
以下是一个完整的示例代码，展示如何使用 easydrawer 创建一个带有子菜单和超子菜单的抽屉导航：
import 'package:flutter/material.dart';
import 'package:easydrawer/easydrawer.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
// 定义抽屉菜单数据
List<Map<String, dynamic>> admindrawerMenus = [
{
"title": "所有用户",
"icon": Icons.person,
"subMenu": true,
"submenuData": [
{"title": "管理员", "event": () {}, "supersubmenu": false},
{"title": "经理", "event": () {}, "supersubmenu": false},
{"title": "顾问", "event": () {}, "supersubmenu": false},
{"title": "代理", "event": () {}, "supersubmenu": false},
{"title": "招生", "event": () {}, "supersubmenu": false},
{"title": "填写", "event": () {}, "supersubmenu": false},
{"title": "接待", "event": () {}, "supersubmenu": false},
],
},
{
"title": "潜在客户",
"icon": Icons.leaderboard,
"subMenu": true,
"submenuData": [
{"title": "所有潜在客户", "event": () {}, "supersubmenu": false},
{"title": "所有客户", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "添加潜在客户", "event": () => print('子菜单 2'), "supersubmenu": false},
{
"title": "分配潜在客户",
"subMenu": true,
"submenuData": [
{"title": "通过LB分配", "event": () => print('超子菜单 1')},
{"title": "重新分配请求", "event": () => print('超子菜单 2')},
{"title": "批量删除潜在客户", "event": () => print('超子菜单 2')},
],
},
],
},
{
"title": "自动拨号潜在客户",
"icon": Icons.autorenew,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "主数据",
"icon": Icons.menu,
"subMenu": true,
"submenuData": [
{"title": "上传学院与课程", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "课程内容", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "配置SMTP", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "短信模板", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "电子邮件模板", "subMenu": true, "submenuData": [
{"title": "雅思", "event": () => print('超子菜单 1')},
{"title": "活动", "event": () => print('超子菜单 2')},
{"title": "大学代理", "event": () => print('超子菜单 2')},
{"title": "国家", "event": () => print('超子菜单 2')},
{"title": "入学时间", "event": () => print('超子菜单 2')},
{"title": "城市", "event": () => print('超子菜单 2')},
{"title": "校区", "event": () => print('超子菜单 2')},
{"title": "资格", "event": () => print('超子菜单 2')},
{"title": "学科", "event": () => print('超子菜单 2')},
{"title": "学院", "event": () => print('超子菜单 2')},
{"title": "课程", "event": () => print('超子菜单 2')},
{"title": "分支", "event": () => print('超子菜单 2')},
{"title": "状态", "event": () => print('超子菜单 2')},
{"title": "子状态", "event": () => print('超子菜单 2')},
{"title": "来源", "event": () => print('超子菜单 2')},
{"title": "入学文件清单", "event": () => print('超子菜单 2')},
{"title": "档案文件清单", "event": () => print('超子菜单 2')},
{"title": "注册计划", "event": () => print('超子菜单 2')},
{"title": "费用类型", "event": () => print('超子菜单 2')},
{"title": "银行详情", "event": () => print('超子菜单 2')},
{"title": "IP地址访问", "event": () => print('超子菜单 2')},
{"title": "权限授予", "event": () => print('超子菜单 2')},
{"title": "设置", "event": () => print('超子菜单 2')},
]},
],
},
{
"title": "跟进",
"icon": Icons.follow_the_signs,
"subMenu": true,
"submenuData": [
{"title": "今日跟进", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "待处理跟进", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "今日完成跟进", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "分配录取",
"icon": Icons.assignment_ind,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "付款状态",
"icon": Icons.payment,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "预计来访",
"icon": Icons.thumb_up_alt,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "预计销售额",
"icon": Icons.bar_chart,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "标准操作流程",
"icon": Icons.insert_drive_file,
"subMenu": true,
"submenuData": [
{"title": "购买SOP", "event": () => print('子菜单 1'), "supersubmenu": false},
],
},
{
"title": "财务",
"icon": Icons.wallet,
"subMenu": true,
"submenuData": [
{"title": "费用", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "现金存取/转账", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "现金流报告", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "所有报告",
"icon": Icons.list_alt,
"subMenu": true,
"submenuData": [
{"title": "总体表现", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "活动状态报告", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "分校/学院录取", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "添加流失",
"icon": Icons.person_add_disabled,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "提示与消息",
"icon": Icons.tips_and_updates,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "国家流程",
"icon": Icons.language,
"subMenu": true,
"submenuData": [
{"title": "加拿大", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "新西兰 & 澳大利亚", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "样本文件", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "支持",
"icon": Icons.help,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "指南",
"icon": Icons.label,
"subMenu": true,
"submenuData": [
{"title": "管理员", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "经理", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "顾问", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "代理", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "招生", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "填写", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "接待", "event": () => print('子菜单 2'), "supersubmenu": false},
{"title": "GIC指南", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "预约",
"icon": Icons.event_note,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "金融科技服务",
"icon": Icons.label,
"subMenu": true,
"submenuData": [
{"title": "请求金融科技服务", "event": () => print('子菜单 1'), "supersubmenu": false},
{"title": "已申请金融科技服务", "event": () => print('子菜单 2'), "supersubmenu": false},
],
},
{
"title": "AI SOP生成器",
"icon": Icons.edit_road,
"subMenu": false,
"event": () => print('菜单 1'),
},
{
"title": "课程查找器",
"icon": Icons.search,
"subMenu": false,
"event": () => print('菜单 1'),
},
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Easy Drawer 示例')),
drawer: Drawer(
child: CommonDrawer(
draweList: admindrawerMenus,
text: 'Lorem Ipsum',
imgUrl: 'assets/images/dummyprofile.png',
color: Colors.blueAccent,
colIcn: Icons.add,
expIcn: Icons.minimize_outlined,
),
),
body: Center(
child: Text('Easy Drawer 示例页面'),
),
),
);
}
}
更多关于Flutter抽屉导航插件easydrawer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter抽屉导航插件easydrawer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
EasyDrawer 是一个用于 Flutter 的简单易用的抽屉导航插件。它可以帮助你快速创建一个带有抽屉导航的用户界面。以下是如何使用 EasyDrawer 的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 easydrawer 的依赖：
dependencies:
flutter:
sdk: flutter
easydrawer: ^1.0.0 # 请确保使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入包
在你的 Dart 文件中导入 easydrawer 包：
import 'package:easydrawer/easydrawer.dart';
3. 使用 EasyDrawer
EasyDrawer 的使用非常简单。你只需要将你的主要内容包裹在 EasyDrawer 组件中，并提供一个 drawer 参数来定义抽屉的内容。
以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:easydrawer/easydrawer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'EasyDrawer Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return EasyDrawer(
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
// 处理点击事件
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
// 处理点击事件
},
),
],
),
),
child: Scaffold(
appBar: AppBar(
title: Text('EasyDrawer Example'),
),
body: Center(
child: Text('Main Content'),
),
),
);
}
}
4. 自定义 EasyDrawer
EasyDrawer 提供了一些可选的参数来自定义抽屉的行为和外观：
drawerWidth: 设置抽屉的宽度。edgeDragWidth: 设置从屏幕边缘拖动打开抽屉的宽度。openCurve: 设置打开抽屉的动画曲线。closeCurve: 设置关闭抽屉的动画曲线。duration: 设置抽屉打开和关闭的动画持续时间。disableGestures: 禁用手势操作。
例如，你可以这样自定义 EasyDrawer：
EasyDrawer(
drawerWidth: 300.0,
edgeDragWidth: 50.0,
openCurve: Curves.easeInOut,
closeCurve: Curves.easeInOut,
duration: Duration(milliseconds: 300),
drawer: Drawer(
// 抽屉内容
),
child: Scaffold(
// 主要内容
),
);
5. 控制抽屉
你可以通过 EasyDrawerController 来控制抽屉的打开和关闭。首先，创建一个 EasyDrawerController 实例，然后将其传递给 EasyDrawer：
final EasyDrawerController _controller = EasyDrawerController();
EasyDrawer(
controller: _controller,
drawer: Drawer(
// 抽屉内容
),
child: Scaffold(
appBar: AppBar(
title: Text('EasyDrawer Example'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
_controller.toggle();
},
),
),
body: Center(
child: Text('Main Content'),
),
),
);
6. 处理抽屉状态
你可以监听抽屉的状态变化，例如抽屉打开或关闭时执行某些操作：
_controller.addListener(() {
if (_controller.isOpen) {
print('Drawer is open');
} else {
print('Drawer is closed');
}
});