机关门户网站建设意义,网站建设与管理方案的总结,海口本地网站,北京互联网公司50强文章目录 概念介绍实现方法示例代码体验分享 我们在上一章回中介绍了滑动窗口相关的内容相关的内容#xff0c;本章回中将介绍如何实现
滑动菜单.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的滑动菜单表示屏幕上向左或者向右滑动滑动时弹… 文章目录 概念介绍实现方法示例代码体验分享 我们在上一章回中介绍了滑动窗口相关的内容相关的内容本章回中将介绍如何实现
滑动菜单.闲话休提让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的滑动菜单表示屏幕上向左或者向右滑动滑动时弹出一个菜单菜单中提供相关的菜单项用来实现一些功能。如果有看官不理解的话可以查看下面的程序运行效果图向左和向右滑动都可以拉出菜单而且菜单的内容不同。本章回中将介绍如何实现这样的滑动菜单。 实现方法
我们在这里实现滑动菜单需要借助flutter_slidable这个三方包因此我们主要介绍一下这个包的使用方法掌握这些方法后就可以实现滑动菜单。
包中把滑动菜单封装成了Slidable组件我们可以向使用其它组件一样使用它因此我主要介绍Slidable组件中常用的属性掌握常用的属性后就可以通过这些属性来实现滑动菜单。
direction属性主要控制滑动方向分水平和垂直两个方向,默认是水平方向startActionPane属性主要控制滑动时显示的菜单向右或者向下滑动时显示的菜单;endActionPane属性主要控制滑动时显示的菜单向左或者向上滑动时显示的菜单;child属性用来存放滑动菜单依附的组件在该组件上向左向右滑动时可以显示滑动菜单
上面介绍的这些属性中我们重点介绍一下两个start/endActionPane属性它们是ActionPane类型该类型是flutter_slidable包封装的类型它的常用属性有有两个
motion属性用来控制菜单的滑出动画比如折叠动画抽屉动画。包中把动画封装成了独立的类直接使用就可以。childern属性用来控制菜单中显示的菜单项目最好使用SlidableAction组件来赋值这是包中封装好的组件可以通过它的属性配置菜单名称颜色以及菜单的功能也就是响应点击菜单时的方法。
示例代码
Slidable(key: const ValueKey(0),///添加滑动时显示的菜单向右或者向下滑动时显示的菜单startActionPane: ActionPane(dismissible: DismissiblePane(onDismissed: (){},),///控制滑动时菜单显示的动画效果// motion: const ScrollMotion(),motion: const DrawerMotion(),///数量超过2个后就显示不全了children: [SlidableAction(onPressed:(BuildContext cxt){} ,backgroundColor: Colors.blue,foregroundColor: Colors.white,icon: Icons.delete,label: Delete,),SlidableAction(onPressed:(BuildContext cxt){} ,backgroundColor: Colors.blue,foregroundColor: Colors.green,icon: Icons.share,label: Share,),SlidableAction(onPressed:(BuildContext cxt){} ,backgroundColor: Colors.blue,foregroundColor: Colors.white,icon: Icons.delete,label: Delete,),],),///添加滑动时显示的菜单向左或者向上滑动时显示的菜单endActionPane: ActionPane(motion: const ScrollMotion(),children: [SlidableAction(flex: 2,onPressed:(BuildContext cxt){} ,backgroundColor: Colors.yellowAccent,foregroundColor: Colors.redAccent,icon: Icons.archive,label: Archive,),SlidableAction(onPressed:(BuildContext cxt){} ,backgroundColor: Colors.yellowAccent,foregroundColor: Colors.redAccent,icon: Icons.save,label: Save,),],),///拉出菜单的高度与child的高度相同修改滑动方向后最好放大高度不然菜单都显不全child: const SizedBox(height: 80,child: ListTile(title: Text(Slid me),),),
)上面的示例代码演示了实现滑动菜单的细节大家可以自己动手去实践。此外这个代码用来实现左右滑动菜单大家可以修改direction属性为垂直方向这样可以在上下方向滑动时拉出菜单。
体验分享
最后分享一些我使用这个包的体验我最开始使用这个包以为是可以同时从四个方向滑动出菜单而且菜单类似上一章回中滑动窗口使用后发现不是预想的效果只能在水平或者垂直方向上二选一而且垂直方向滑出的菜单效果不好。滑动时拉出的是一个可以调整高度的菜单而不是窗口滑动菜单中的菜单项目不能太多否则显示不完整。我感觉这个滑动菜单就是模仿ios操作而设计的在Android上使用的场景比较少。
看官们与如何实现滑动菜单相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
