Flutter | 可能是目前最好用的仿微信聊天長按彈出框 WPopupMenu

Flutter筆記發表於2019-08-09

很多用 iOS 的小夥伴都用過該功能:

微信聊天視窗,長按某一條訊息,彈出彈框,選擇「複製、轉發...」等等。

基於這個需求,我封裝了一個 「WPopupMenu」。

WPopupMenu

話不多說,先上圖:

Flutter | 可能是目前最好用的仿微信聊天長按彈出框 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/…

Flutter | 可能是目前最好用的仿微信聊天長按彈出框 WPopupMenu

相關文章