很多用 iOS 的小伙伴都用过该功能:
微信聊天窗口,长按某一条消息,弹出弹框,选择「复制、转发...」等等。
基于这个需求,我封装了一个 「WPopupMenu」。
话不多说,先上图:
还是老样子,我们先来看构造函数:
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
本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记
原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。
原始发表时间:2019-08-09
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句