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