Flutter | Вероятно, лучшая имитация всплывающего окна чата WeChat при длительном нажатии WPopupMenu

Flutter

Многие друзья, которые используют iOS, использовали эту функцию:

В окне чата WeChat нажмите и удерживайте сообщение, появится всплывающее окно, выберите «Копировать, переслать...» и так далее.

Основываясь на этом требовании, я инкапсулировал «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: это обратный вызов, когда действие нажато и выбрано. Возвращаемое значение — целое число. Если оно не выбрано и нажато пустое место, оно вернет ноль
  2. действия: тип — это список, который является копией «пересылки, копирования» и т. д., как показано на рисунке выше.
  3. ребенок: Излишне говорить
  4. pressType: событие щелчка, существует два типа, триггер длительного нажатия или триггер щелчка.
  5. pageMaxChildCount: Во всплывающем окне может быть до нескольких действий, по умолчанию 5, если последняя страница меньше 5, то оставшиеся будут делить пространство поровну (такая же логика, как у WeChat)

как использовать

Просто поместите его в то место, где вам нужно использовать элемент управления, и вы можете использовать его.Простой код выглядит следующим образом:

WPopupMenu(
  onValueChanged: (int value) {
    /// showSnackBar
  },
  actions: actions,
  child: Container(
    /// 省略...
  ),
),

Имя файла кода: "widget_w_popup_menu.dart",

Конкретная демонстрация находится в: "popup_route_page.dart".

наконец

Позже я опубликую статью о логике упаковки этого компонента, так что следите за обновлениями.

Относительно этого компонента есть еще несколько несовершенств:

  1. Треугольник под всплывающим окном
  2. Он должен выскочить в самом верху

Полный код загружен на GitHub:GitHub.com/web1209/…

Категории