专栏首页Flutter笔记Flutter | 可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu

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

本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter | ConstrainedBox & UnconstrainedBox 组件

    在 Flutter 当中,我们如何控制组件的大小?套上一层 Container?SizeBox?还是一些别的技巧?

    Flutter笔记
  • Flutter | 超简单仿微信QQ侧滑菜单组件

    1.首先可以滑出菜单2.菜单滑动到一定距离完全滑出,未达到距离回滚3.菜单数量、样式随意定制4.菜单点击回调5.菜单展开时,点击 item 收回菜单(见QQ)

    Flutter笔记
  • Flutter | 超实用简单菜单弹出框 PopupMenuButton

    幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果。

    Flutter笔记
  • # 使用InheritedWidget传递数据

    上面例子你看到,每个DataTransferWidget的构造函数都依赖父widget的data,如果还有第4层,第5层...等嵌套的话,data要不停的通过构...

    用户1175783
  • 「云之基石、安全守护」

    腾讯云安全
  • Ubuntu 18.04下,Goland和Clion 不能输入中文问题;

    最近使用goland 和 clion 进行开发时;发现不能使用中文输入法;就是很尴尬;

    xuyaowen
  • 四句话总结JavaScript作用域

    前言:JavaScript的作用域一直以来都是前端开发中比较难以理解的知识点,JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域,本次...

    用户1432189
  • 2017 OWASP Top 10十大安全漏洞候选出炉,你怎么看?

    OWASP(开放式Web应用程序安全项目)近日公布2017 OWASP Top10(十大安全漏洞列表),增加了2个新分类。 背景介绍 OWASP项目最具权威的...

    FB客服
  • CDN系列学习文章(二)——DNS调度

    本文主要介绍一下CDN调度,主要是DNS调度。介绍之前,咱们先聊聊CDN为啥要调度呢

    开元
  • 【大咖说】安筱鹏:软件视角的未来工业

    ? 工信部信息化和软件服务业司副司长安筱鹏在“软件视角的未来工业”主题演讲中指出,制造企业从自动化向智能化转型,是要解决局部优化到整体优化的过程,智能制造的...

    钱塘数据

扫码关注云+社区

领取腾讯云代金券