задний план

При разработке проекта часто приходится сталкиваться с необходимостью отображения некоторых окон подсказок или направляющих окон в соответствии с фоновым бизнес-интерфейсом, иногда эти всплывающие окна отображаются несколько раз или только один раз, а также имеют определенный внутренний приоритет. отображение не может перекрываться. После завершения некоторых операций всплывающее окно с подсказкой или подсказкой после операции отображается только после входа на указанную страницу. Особенно во Flutter, они также более сложны, потому что приоритет родного всплывающего окна выше, чем у Flutter, например приложение разрешения, отпечаток пальца и т. д.

Это усложняет обработку.Общая обработка заключается в использовании некоторых переменных в интерфейсе для управления тем, отображается ли всплывающее окно в данный момент, чтобы определить, следует ли отображать другие всплывающие окна, или чтобы подтвердить, является ли всплывающее окно отображается окно идентификации; это вносит различные временные изменения и суждения в интерфейс, что сильно влияет на читаемость всего интерфейса.

Так что здесь я поделюсь с вами некоторыми идеями и методами обработки в проекте, и все будут учиться вместе.

статус-кво

Различные стили всплывающих окон, перекрытие нескольких всплывающих окон и приоритет среди нескольких всплывающих окон
Иногда во всплывающем окне необходимо указать конкретную страницу
Одно и то же всплывающее окно будет отображаться повторно
POP не может быть указан закрытым

идеи

Для всплывающего окна, которое необходимо отобразить на определенной странице, оценивается, является ли текущее представление верхнего уровня конкретной страницей, прежде чем его нужно отобразить (поскольку всплывающее окно во Flutter не нужно отображать). связанные со страницей).
Каждое всплывающее окно имеет приоритет, перед тем, как страница должна быть отображена, она будет сначала расставлена по приоритету, а затем отображена в соответствии с результатами сортировки.
Каждое всплывающее окно будет генерировать фиксированный уникальный идентификатор для решения проблемы дублирования всплывающих окон.
Для проблемы, заключающейся в том, что всплывающее окно не может быть указано для закрытия, если есть всплывающее окно, которое необходимо принудительно отобразить, оно сначала определит, есть ли отображаемое в данный момент всплывающее окно, и если есть, сначала будет отображаться всплывающее окно, а затем обязательное всплывающее окно.

добиться эффекта

Решение

DialogManager

Унифицированный класс управления всплывающими окнами для управления добавлением и отображением всплывающих окон,Подробный код смотрите в конце.

метод инициализации

Метод инициализации генерирует два массива списка _DialogList, _sashowbeans. POP _DialogList для хранения данных в унифицированном добавлении в POP _sashowbeans для хранения были отображены, нет четких загрузок данных

Почему бы не использовать один bean-компонент для хранения отображаемых данных всплывающего окна, потому что обработка установки его пустым находится в асинхронном обратном вызове исчезновения всплывающего окна.Если отображаемые данные всплывающего окна установлены пустыми, это приведет к неточным отображается всплывающее окно во время текущего решения.

добавить метод

В основном используется для добавления данных всплывающих окон в _Dialoglist.

Если добавленное всплывающее окно имеет значение highClear или highClearAll, другие всплывающие окна с низким приоритетом будут удалены. Основным сценарием является всплывающее окно принудительного обновления и всплывающее окно входа в систему с несколькими терминалами.
Для повторно добавляемых всплывающих окон не добавляйте повторно
Для всплывающих окон уровня highClear или highClearAll, которые уже находятся в стеке, всплывающие окна с низким приоритетом добавляться не будут.
Установить приоритет для всех всплывающих окон

показать метод

В основном используется для добавления данных всплывающих окон в _dialogList.

Если добавленное всплывающее окно имеет значение highClear или highClearAll, другие всплывающие окна с низким приоритетом будут удалены. Основным сценарием является всплывающее окно принудительного обновления и всплывающее окно входа в систему с несколькими терминалами.
Для повторно добавляемых всплывающих окон не добавляйте повторно
Для всплывающих окон уровня highClear или highClearAll, которые уже находятся в стеке, всплывающие окна с низким приоритетом добавляться не будут.
Установить приоритет для всех всплывающих окон

DialogBean

///dialog唯一标识，通过 DialogBean 数据内容生成 Md5生成
String dialogId;

///当前 dialog，显示的视图。如果为空，则在顶层页面
String pageRouter;

///优先级、用于显示弹窗前排序，
///但对于加入的弹窗，已经显示的情况
///[highClear] 清除已显示的弹窗，直接显示当前弹窗，该属性慎用
///[high] 回收当前已显示的弹窗，再显示高优先级弹窗，该属性慎用
DialogPriority dialogPriority;

///用于排序
int priority;

///弹窗内部业务 widget,每次show 时动态创建。不能直接传创建好的 widget，因为在 high回收时，调用 pop 再 show 会出现 The following NoSuchMethodError was thrown building Builder(dirty):
CreateDialogWidget createDialogWidg

Подробный код смотрите в конце.

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

DialogUtil

публичный класс создания всплывающих окон,Подробный код смотрите в конце.

Создайте уникальный идентификатор, соответствующий диалогу
Диалог Собственная внутренняя обработка бизнеса

DialogManager()
  ..add(
      DialogBean(
        dialogPriority: DialogPriority.high,
        createDialogWidget: () =>
            DialogUtil.createTipWidget(context, "测试弹窗\n 换行
"),
      ))
      ..add(
      DialogBean(
        dialogPriority: DialogPriority.high,
        createDialogWidget: () =>
            DialogUtil.createTipWidget(context, "测试弹窗"),
      ))
  ..show(context);

DialogManager()
  ..add(
      DialogBean(
        dialogPriority: DialogPriority.high,
        createDialogWidget: () =>
            DialogUtil.createTipWidget(context, "测试弹窗"),
      ))
      ..add(
      DialogBean(
        dialogPriority: DialogPriority.high,
        createDialogWidget: () =>
            DialogUtil.createTipWidget(context, "测试弹窗"),
      ))
  ..show(context);

DialogManager()
  ..add(
      DialogBean(
        createDialogWidget: () => DialogUtil.createTipWidget(
          context,
          "测试弹窗\n 换行",
        ),
      ))
  ..show(context);

Future.delayed(Duration(seconds: 1), () {
  DialogManager()
    ..add(
        DialogBean(
          dialogPriority: DialogPriority.high,
          createDialogWidget: () =>
              DialogUtil.createTipWidget(context, "测试弹窗"),
        ))
    ..show(context);
});

Это можно изменить, сначала отобразить высокий приоритет, а затем отобразить другой

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

DialogManager()
  ..add(
      DialogBean(
        createDialogWidget: () => DialogUtil.createTipWidget(
          context,
          "测试弹窗\n 换行"
        ),
      ))
  ..show(context);

Future.delayed(Duration(seconds: 1), () {
  DialogManager()
    ..add(
        DialogBean(
          dialogPriority: DialogPriority.highClear,
          createDialogWidget: () =>
              DialogUtil.createTipWidget(context, "测试弹窗"),
        ))
    ..show(context);
});

Всплывающая страница для проверки: указывает всплывающее окно на указанной странице.


Future.delayed(Duration(seconds: 1), () {
  DialogManager()
    ..add(
        DialogBean(
          pageRouter: Router.login,
          createDialogWidget: () => DialogUtil.createTipWidget(
            context,
            "测试弹窗",
          ),
        ))
    ..show(context);
});

наконец

Если у вас возникнут проблемы во время использования, оставьте сообщение ниже, чтобы сообщить об этом.

Адрес загрузки кода

учебные материалы

Flutter Github
Китайская сеть Flutter
Flutter Packages
Флаттер электронная книга
Китайская сеть ресурсов сообщества Flutter

Обдумывание и реализация унифицированного управления всплывающими окнами Flutter