Flutter滑动抽屉导航插件slidable_drawer的使用
Flutter滑动抽屉导航插件slidable_drawer的使用
此插件用于实现一个可以通过简单滑动打开的自定义抽屉。 🚀
包含可进行动画打开/关闭抽屉的 SlidableDrawerController 😊
点个赞并 收藏此仓库 来支持我们的项目!
📌 特性 #
- ✅ 通过向右滑动简单地打开/关闭抽屉
- ✅ 使用 SlidableDrawerController 打开/关闭抽屉
📌 开始使用 #
请按照以下步骤使用此插件:
添加依赖 #
dependencies:
slidable_drawer: ^1.0.6
导入包 #
import 'package:slidable_drawer/slidable_drawer.dart';
使用简单 #
以下是一个简单的 SlidableDrawer
使用示例。

小部件部分:
import 'package:flutter/material.dart';
import 'package:slidable_drawer/slidable_drawer.dart';
void main() {
runApp(MaterialApp(
theme: ThemeData.dark(),
home: const MyApp(),
));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
// 创建并返回与 MyApp 相关联的状态。
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
// MyApp 小部件的状态。
class _MyAppState extends State<MyApp> {
final SlidableDrawerController _slidableDrawer = SlidableDrawerController();
// 当此对象插入到树中时调用。
[@override](/user/override)
void initState() {
super.initState();
}
// 构建此状态所表示的小部件。
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SlidableDrawer(
drawerBody: _SlidableDraweBody(
controller: _slidableDrawer,
),
innerDrawerController: _slidableDrawer,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Center(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
),
onPressed: () {
_slidableDrawer.animateToOpen(); // 打开抽屉
},
child: const Text(
'Open Drawer',
style: TextStyle(color: Colors.white),
),
)),
),
),
);
}
}
class _SlidableDraweBody extends StatelessWidget {
final SlidableDrawerController controller;
const _SlidableDraweBody({required this.controller});
// 构建此无状态小部件所表示的小部件。
[@override](/user/override)
Widget build(BuildContext context) {
return Container(
color: const Color.fromARGB(255, 66, 66, 66), // 可以是任何颜色
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
controller.animateToClose(); // 关闭抽屉
},
child: const Text('Close'),
),
],
),
);
}
}
更多关于Flutter滑动抽屉导航插件slidable_drawer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter滑动抽屉导航插件slidable_drawer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter中使用slidable_drawer
插件来实现滑动抽屉导航的一个简单示例。slidable_drawer
是一个流行的Flutter包,用于创建可滑动的抽屉导航菜单。不过需要注意的是,截至我的最后一次更新(由于信息时效性),slidable_drawer
可能不是官方包或非常流行的第三方包,因此这里我会展示一个类似效果的实现,使用Flutter内置的Drawer
组件结合DraggableScrollableSheet
来实现一个可滑动的抽屉效果。
首先,确保在你的pubspec.yaml
文件中添加必要的依赖(虽然这里不涉及额外包,但通常Flutter开发需要一些基本依赖):
dependencies:
flutter:
sdk: flutter
然后,你可以按照以下步骤创建一个带有可滑动抽屉导航的应用:
- 创建主应用框架:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Sliding Drawer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
- 实现主页和抽屉导航:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
double _drawerElevation = 16.0;
double _drawerPercentOpen = 0.0;
final double _minExtent = 56.0; // Minimum drawer extent
final double _maxExtent = 300.0; // Maximum drawer extent
void _openDrawer() {
setState(() {
_drawerPercentOpen = 1.0;
});
}
void _closeDrawer() {
setState(() {
_drawerPercentOpen = 0.0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sliding Drawer Demo'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: _openDrawer,
),
),
body: Center(
child: Text('Swipe left to open drawer'),
),
endDrawer: DraggableScrollableSheet(
expand: _drawerPercentOpen,
minChildSize: _minExtent,
maxChildSize: _maxExtent,
builder: (BuildContext context, ScrollController scrollController) {
return Drawer(
elevation: _drawerElevation,
child: ListView(
controller: scrollController,
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
_closeDrawer();
// Navigator.pop(context); // Uncomment if you want to close drawer on item tap
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
_closeDrawer();
// Navigator.pop(context); // Uncomment if you want to close drawer on item tap
},
),
// Add more ListTiles as needed
],
),
);
},
),
);
}
}
在这个示例中,我们使用了DraggableScrollableSheet
来实现抽屉的可滑动效果。expand
属性控制抽屉的展开程度,而minChildSize
和maxChildSize
定义了抽屉的最小和最大尺寸。Drawer
组件用于构建抽屉的内容,包括头部和列表项。
请注意,这里使用的是endDrawer
属性,这意味着抽屉将从屏幕的右侧滑出。如果你希望抽屉从左侧滑出,可以使用drawer
属性代替endDrawer
。
这个示例展示了如何使用Flutter内置组件创建一个基本的可滑动抽屉导航菜单。虽然这不是直接使用slidable_drawer
插件的代码,但它提供了类似的功能和效果。如果你确实需要使用slidable_drawer
插件,请确保它存在并在其官方文档或GitHub仓库中查找具体的用法示例。