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

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

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

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，如果没有选中，点击空白处了，则会返回一个 null 2. 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