Flutter實現(xiàn)彈窗攔截器的示例代碼

更新時間：2023年09月04日 14:11:38 作者：newki

彈窗的排隊執(zhí)行在App中是一個很常見的應(yīng)用場景,這篇文章為大家介紹了兩個Flutter實現(xiàn)彈窗攔截器的示例代碼,感興趣的小伙伴可以學(xué)習一下

前言

彈窗的排隊執(zhí)行在App中是一個很常見的應(yīng)用場景。比如進入App首頁，一系列的彈窗就會彈出。如果不做處理就會導(dǎo)致彈窗一窩蜂的全部彈出，嚴重影響用戶體驗。

如果多個彈窗中有判斷邏輯，同意協(xié)議彈出另一個彈窗，不同意彈窗另外一個彈窗，又添加了復(fù)雜度了。

所以才會有需要管理多個彈窗的展示時機，一般來說在一個Flutter App 中有下面幾種方式來管理的。

一、隊列的方式實現(xiàn)

其實最簡單最原始的方案就是硬寫，判斷邏輯寫在彈窗或Picker里面，一層一層的嵌套，反正布局都嵌套了，彈窗邏輯嵌套怕什么...

當然比較好的做法是用一個隊列管理起來。

class DialogQueue {
  final Queue<AlertDialog> _dialogQueue = Queue();
  bool _isShowingDialog = false;
  void show(AlertDialog dialog, BuildContext context) {
    _dialogQueue.add(dialog);
    if (!_isShowingDialog) {
      _isShowingDialog = true;
      _showNext(context);
    }
  }
  void _showNext(BuildContext context) {
    if (_dialogQueue.isNotEmpty) {
      final dialog = _dialogQueue.removeFirst();
      showDialog<void>(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        },
      ).then((_) {
        if (_dialogQueue.isNotEmpty) {
          _showNext(context);
        } else {
          _isShowingDialog = false;
        }
      });
    }
  }
}

使用的時候，往隊列里面添加即可：

        ElevatedButton(
            onPressed: () {
                _dialogQueue.show(
                AlertDialog(
                    title: Text('Dialog 1'),
                    content: Text('This is the first dialog'),
                ),
                context, 
                );
            },
            child: Text('Show Dialog 1'),
        ),
        ElevatedButton(
            onPressed: () {
                _dialogQueue.show(
                AlertDialog(
                    title: Text('Dialog 2'),
                    content: Text('This is the second dialog'),
                ),
                context, 
                );
            },
               child: Text('Show Dialog 2'),
        ),

代碼很簡單，但這樣雖然能做到排隊執(zhí)行，但是有幾個很大的問題，不夠靈活，不能控制其中哪一個不顯示或不顯示（實現(xiàn)起來比較麻煩），其次就是只支持 Dialog，不支持用 Toast SnackBar Picker等其他的用法。

總結(jié)一句話就是不夠靈活。那么我們之前使用過值攔截式的攔截器實現(xiàn)在 Android 平臺已經(jīng)實現(xiàn)過了。那么我們移植到 Flutter 平臺能不能實現(xiàn)對應(yīng)的功能呢？

二、攔截器的方式實現(xiàn)

與前文攔截器實現(xiàn)登錄攔截的方式有所區(qū)別的是通過值傳遞方式我們需要定義一個泛型，把傳遞的對象定義一下。

class InterceptChain<T> {
  InterceptChain? next;
  void intercept(T data) {
    next?.intercept(data);
  }
}

管理類:

class InterceptChainHandler<T> {
  InterceptChain? _interceptFirst;
  void add(InterceptChain interceptChain) {
    if (_interceptFirst == null) {
      _interceptFirst = interceptChain;
      return;
    }
    InterceptChain? node = _interceptFirst;
    while (true) {
      if (node!.next == null) {
        node.next = interceptChain;
        break;
      }
      node = node.next;
    }
  }
  void intercept(T data) {
    _interceptFirst?.intercept(data);
  }
}

與之前攔截登錄的方式不同的是，這種方案沒有指定的一些攔截器，更加的靈活，使用起來我們就需要定義每一個 InterceptChain ，也就是每一個 Dialog/Picker等效果都可以是一個 Intercept 。

class TipsIntercept extends InterceptChain<DialogPass> {
  @override
  void intercept(DialogPass data) {
    SmartDialog.show(
      usePenetrate: false,
      builder: (context) =>
          AppDefaultDialog(
            "你確定要發(fā)送驗證碼嗎？",
            confirmAction: () {
              super.intercept(data);
            },
          ),
    );
  }
}
class VerifyIntercept extends InterceptChain<DialogPass> {
  @override
  void intercept(DialogPass data) {
    SmartDialog.show(
      usePenetrate: false,
      builder: (context) => VerifyCodeDialog(
        confirmAction: () {
          super.intercept(data);
        },
      ),
    );
  }
}
class OneIntercept extends InterceptChain<DialogPass> {
  @override
  void intercept(DialogPass data) {
    if (data != null) {
      final interceptData = '當前的Data1:${data.msg}';
      print(interceptData);
      if (data.passType == 1) {
        // 彈窗1
        SmartDialog.show(
          usePenetrate: false,
          builder: (context) => AppDefaultDialog(
            data.msg ?? "",
            confirmAction: () {
              data.passType = 2;
              super.intercept(data);
            },
          ),
        );
      } else {
        super.intercept(data);
      }
    } else {
      super.intercept(data);
    }
  }
}
class TwoIntercept extends InterceptChain<DialogPass> {
  @override
  void intercept(DialogPass data) {
    if (data != null) {
      final interceptData = '當前的Data2:${data.msg}';
      print(interceptData);
      if (data.passType == 2) {
        // 彈窗2
        SmartDialog.show(
          usePenetrate: false,
          clickMaskDismiss: false,
          builder: (context) => PrivacyPolicyDialog(
            confirmAction: () {
              data.passType = 3;
              super.intercept(data);
            },
            cancelAction: () {
              super.intercept(data);
            },
          ),
        );
      } else {
        super.intercept(data);
      }
    } else {
      super.intercept(data);
    }
  }
}
class ThreeIntercept extends InterceptChain<DialogPass> {
  @override
  void intercept(DialogPass data) {
    if (data != null) {
      final interceptData = '當前的Data3:${data.msg}';
      print(interceptData);
      if (data.passType == 3) {
        // 彈窗2
        DataPickerUtil.showCupertinoDataPicker(
          items: ["全部","等待確認", "已完成"],
          onPickerChanged: (list, position) {
            super.intercept(data);
          },
        );
      } else {
        super.intercept(data);
      }
    } else {
      super.intercept(data);
    }
  }
}

這里簡單的定義了5個彈窗/Picker效果，并且簡單的定義了變量的控制對象為：

class DialogPass {
  String? msg;
  int passType = 0;
  DialogPass(this.msg, this.passType);
}

這個是一般是由后臺服務(wù)器控制，請求接口之后可以動態(tài)的根據(jù)多個變量控制哪一個彈窗展示，并且可以控制一個彈窗展示之后它對應(yīng)的后續(xù)彈窗的展示。可以很方便的通過對象中的變量控制。

具體哪個彈窗是否展示，如何展示都是子 Intercept 控制，我們最終只需要把全部的攔截類添加到攔截器容器中即可：

 final intercepts = InterceptChainHandler<DialogPass>();
    intercepts.add(TipsIntercept());
    intercepts.add(VerifyIntercept());
    intercepts.add(OneIntercept());
    intercepts.add(TwoIntercept());
    intercepts.add(ThreeIntercept());
    intercepts.intercept(DialogPass('你確定你要閱讀全部協(xié)議嗎1？',1));

效果：