Flutter | 思路解析 WPopupMenu 仿微信聊天长按弹出菜单

在上一篇文章中发布了 WPopupMenu 的第一个版本，而且也遗留了两个问题：

1. 弹出框下面的三角
2. 在最顶端的时候应向下弹出

那在此次发文以前也是解决了上述两个问题和完善了一些逻辑问题：

1. 若是 child 的长度大于 menu 的长度，那么则把 menu 放在中间
2. 若是 child 的长度小于 menu 的长度，三角形的位置在 child 的中间

很少说，上图：

WPopupMenu 实现思路解析

首先，仍是按照正常业务逻辑，先提需求：

1. 在当前页面弹出
2. 样子要和微信同样
3. 自动肯定弹出位置（上 或者 下）
4. 三角形自动判断是 正三角 仍是 倒三角

需求差很少了，就该来实现了。

在当前页面弹出

首先迎面来的就是第一个难题，如何在当前页面弹出？

这就涉及到我前面所讲的几篇文章：

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

Flutter 源码系列：DropdownButton 源码浅析

这几个控件的源码里都有一个类：PopupRoute，该类我也讲过：

PopupRoute 是一个浮在当前页面上的 Route.

看到没，这就是阅读源码的益处！

既然是一个 Route，那么也能够经过他来返回值，一箭双雕。

了解了如何在当前页面弹出页面，那就能够自定义样式了。

样子要和微信同样

样式也很简单，大概也能看的出来：

1. 第一页是一个 ListView + 箭头，若是不满一页则不显示箭头
2. 除了第一页都是 左箭头 + ListView + 右箭头
3. 第二页之后 若是后续再没有数据，则右箭头灰色且不可点击

三角形咱们先不说，整个 menu 实际上是有一个背景的，就是一个圆角矩形，使用 ClipRRect 就能实现。

剩下的就是 ListView 和箭头的组合，我使用了 Row 来组合这些组件，由于箭头和 ListView 的 item 宽度不同，而且若是都使用 ListView，那么下标的计算也很烦人。

因此我这里直接放弃了这种麻烦的方法，选择了一个相对简单的方法。

大体逻辑以下：

自动肯定弹出位置（上 或者 下）

若是你看过最开始说的那些控件的源码，那么这个问题对于你来讲应该不是问题，由于...

那些控件的源码里给了一个解决方案。直接复制代码，稍微改一改就能用：

// 使用该控件
CustomSingleChildLayout(
  // 这里计算偏移量
  delegate: _PopupMenuRouteLayout(),
  child: SizedBox()
)
 // ---------------------------------------------

// 使用 SingleChildLayoutDelegate 并复写 getPositionForChild 方法来计算坐标
class _PopupMenuRouteLayout extends SingleChildLayoutDelegate {
  @override
  Offset getPositionForChild(Size size, Size childSize) {
     // ...
    return Offset(x, y);
  }
}

复制代码

这里只是肯定了一个偏移量，那对于弹出位置是在 child 上面仍是下面，我是用 y 来判断的：

若是 「 y < menu.height * 2 」，那么则把它放到 child 下面。

三角形自动判断是 正三角 仍是 倒三角

这里的三角形是用 CustomPainter 来画的，这样能够本身随便定义属性，简单又方便。

简单逻辑以下：

大概的代码以下：

void paint(Canvas canvas, Size size) {
  var path = Path();

  // 若是 menu 的长度 大于 child 的长度
  if (size.width > this.size.width) {
    // 靠右
    if (position.left + this.size.width / 2 > position.right) {
      path.moveTo(size.width - this.size.width + this.size.width / 2, isInverted ? 0 : size.height);
      path.lineTo(
        size.width - this.size.width + this.size.width / 2 - radius / 2, isInverted ? size.height : 0);
      path.lineTo(
        size.width - this.size.width + this.size.width / 2 + radius / 2, isInverted ? size.height : 0);
    }else{
      // 靠左
      path.moveTo(this.size.width / 2, isInverted ? 0 : size.height);
      path.lineTo(
        this.size.width / 2 - radius / 2, isInverted ? size.height : 0);
      path.lineTo(
        this.size.width / 2 + radius / 2, isInverted ? size.height : 0);
    }
  } else {
    path.moveTo(size.width / 2, isInverted ? 0 : size.height);
    path.lineTo(
      size.width / 2 - radius / 2, isInverted ? size.height : 0);
    path.lineTo(
      size.width / 2 + radius / 2, isInverted ? size.height : 0);
  }

  path.close();

  canvas.drawPath(
    path,
    _paint,
  );
}
复制代码

总结

一个完整版的 WPopupMenu 就完成了，这里只是简单的说了一下逻辑，

但实际写起来并无那么简单。

若是以为项目还能够，请点个 star，万分感谢！

完整代码已经传至GitHub：github.com/wanglu1209/…

我也建立了一个微信群，有兴趣的能够扫码加群，若是群满，能够添加我我的微信：17610912320，并注明来意。