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，若是没有选中，点击空白处了，则会返回一个 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：github.com/wanglu1209/…