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

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

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

基于这个需求，我封装了一个 「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，如果没有选中，点击空白处了，则会返回一个 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