Flutter可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu

很多用iOS的小伙伴都用过该功能:微信聊天窗口,长按某一条消息,弹出弹框,选择「复制、转发...」等等。基于这个需求,我封装了一个「WPopupMenu」。WPopupMenu话不多说,先上图:构造函数还是老样子,我们先来看构造函数:WPopupMenu(@requiredthis.onValueChanged,@requiredthis.actions,@requiredthis.child,t...

Flutter可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu

很多用 iOS 的小伙伴都用过该功能:

微信聊天窗口,长按某一条消息,弹出弹框,选择「复制、转发...」等等。

基于这个需求,我封装了一个 「WPopupMenu」。

WPopupMenu

话不多说,先上图:

640?wx_fmt=gif

构造函数

还是老样子,我们先来看构造函数:

WPopupMenu({  @required this.onValueChanged,  @required this.actions,  @required this.child,  this.pressType = PressType.longPress,  this.pageMaxChildCount = 5,})  : assert(onValueChanged != null),assert(actions != null && actions.length > 0),assert(child != null);

解释一下参数:

1.onValueChanged:是点击选中了某一个 action 时候的回调,返回值是一个 int,如果没有选中,点击空白处了,则会返回一个 null2.actions:类型是一个 List,也就是上图看到的 「转发,复制」等等文案3.child:不用多说了4.pressType:点击事件,有两种,长按触发 还是 单击触发5.pageMaxChildCount:弹出框里最多能有几个 action,默认为 5 个,如果最后一页不足 5 个,那么则剩下的几个会平分空间(和微信的逻辑是一样的)

如何使用

直接在需要使用该控件的地方套上,就能使用了,简单代码如下:

WPopupMenu(  onValueChanged: (int value) { /// showSnackBar  },  actions: actions,  child: Container( /// 省略...  ),),

代码文件名叫:「widget_w_popup_menu.dart」,

具体 Demo 在:「popup_route_page.dart」。

最后

后面我会出一篇关于该组件的封装逻辑,敬请期待。

关于该组件,还有几处未完善:

1.弹出框下面的三角2.在最顶端的时候应向下弹出

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

640?wx_fmt=png

源文地址:https://www.guoxiongfei.cn/csdn/7541.html