Flutter 统一弹窗管理的思考与实现

背景

  在项目开发中经常会碰到有时要根据业务后台接口显示一些提示框或者引导框什么的，有时这些弹框要多次显示或只显示一次，并且它们内部也有一定的优先级，还要保证一个一个的显示，不能重叠。还有一些操作完成后，进入到了指定的页面才显示这个操作之后的提示或引导弹窗。特别是在 Flutter 中，这些还显示更为复杂，因为原生的弹窗的优先级比 Flutter 的优先级高，例如权限申请、指纹等。

  这就使得处理更为复杂，通用的处理是在界面通些一些变量来控制当前是否有弹窗在显示，来判断其它的弹窗要不要显示，或者通过标识来确认弹窗是否已经显示过；这就使得界面上有各种各样的临时变更，及各种判断，这样就非常影响整个界面的可读性。

  所以在这里就把项目中一些处理的思路与方法跟大家分享下，大家一起学习。

现状

1. 弹窗样式多样、多个弹窗重叠、多个弹窗间有优先级
2. 有时弹窗需指定特定页面
3. 同一弹窗会重复显示
4. 弹窗无法指定关闭

思路

• 对于上述场景，对于自动触发弹出的弹窗，统一加到弹窗管理中。
• 对于没有指定页面的弹窗，则加入到顶层页面中。弹窗管理有特定顶层页面，用于显示当前顶层需显示的弹窗列表
• 对于需要在特定页面显示的弹窗，则在需要显示前判断当前顶层视图是否为特定页面（因为 Flutter 中弹窗无需与页面关联）。
• 每个弹窗都有优先级，在页面需要显示前，会先进行优先级排序，再根据排序结果进行展示
• 每个弹窗都会生成一个固定的唯一标识，用于处理弹窗重复问题
• 对于弹窗无法指定关闭的问题，如有需强制显示的弹窗，则会先判断当前是否有显示的弹窗，有则先 pop弹窗再显示强制的弹窗

实现效果

image

解决办法

DialogManager

image

统一弹窗管理类，管理弹窗的添加及显示，详细代码见最后。

• 初始化方法

  初始化方法中生成两个数组List _dialogList，_hasShowBeans。_dialogList用于储存加入在统一弹窗中的弹窗数据
_hasShowBeans用于存储已经显示过，还没有清除的弹窗数据

  为什么不用单一 bean 去储存显示的弹窗数据，因为置为空的处理，是在弹窗消失的异步回调中，如果一个新的弹窗要显示，旧的那个弹窗消失的回调过来会把当前在显示的弹窗数据置为空，则会导致当前判断时否有显示的弹窗不准确。

• add 方法

image

主要用于添加弹窗数据在_dialogList中

1. 假如添加的弹窗为 highClear 或 highClearAll，则会移除其它低优先级的弹窗。主要场景是在强制升级弹窗、多终端登录弹窗
2. 对于重复添加的弹窗，则不重复添加
3. 对于栈中已经存在 highClear 或 highClearAll级别弹窗，则不添加低优先级弹窗
4. 对所有的弹窗进行优先级排序

• show 方法

主要用于添加弹窗数据在_dialogList中

1. 假如添加的弹窗为 highClear 或 highClearAll，则会移除其它低优先级的弹窗。主要场景是在强制升级弹窗、多终端登录弹窗
2. 对于重复添加的弹窗，则不重复添加
3. 对于栈中已经存在 highClear 或 highClearAll级别弹窗，则不添加低优先级弹窗
4. 对所有的弹窗进行优先级排序

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

统一的弹窗实体类，详细代码见最后。

1. dialogId,用于弹窗去重
2. pageRouter用于指定弹窗需显示的页面，如果没有指定，则直接显示
3. dialogPriority标识弹窗优先级
4. priority弹窗优先级扩展字段，主要用于排序
5. createDialogWidget生成弹窗widget.不用直接使用 widget，在 high 回收时，再显示会报异常。

DialogUtil

image

公共弹窗创建类，详细代码见最后。

1. 生成对应 dialog 唯一的 id
2. dialog 业务自身内部处理
3. 需要加入统一弹窗管理中 dialog 统一在这里生成

场景验证

多个弹窗是否按顺序依次弹出

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 社区中文资源网

请大家不吝点赞！因为您的点赞是对我最大的鼓励，谢谢！