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/…