Flutter简易版多弹窗控制器

168 阅读1分钟

最近写项目的时候遇到了首页弹出多个弹窗的需求,基于dart的语法特性,可以用await来实现一个简单的控制器。


class PopupChain {
  final List<PopupWidget> popups;

  PopupChain(this.popups);

  Future<void> start() async {
    for (var popup in popups) {
      await popup.show();
    }
  }
}

控制器包含了一个弹窗的数组,在start函数调用时,配合await逐个弹出。

abstract class PopupWidget {
  Future<void> show();
}

class Popup1 extends PopupWidget {
  @override
  Future<void> show() async {
    await Get.dialog(
      AlertDialog(
        title: const Text('Popup 1'),
        content: const Text('This is Popup 1.'),
        actions: <Widget>[
          TextButton(
            onPressed: Get.back,
            child: const Text('Close', style: TextStyle(color: Colors.white),),
          ),
        ],
      ),
    );
  }
}

让每个弹窗通过实现抽象类来控制其显示。这里使用了getx,省掉了全局使用上下文。

final popupChain = PopupChain([
  Popup1(),
  Popup1(),
]);

popupChain.start();

然后在需要批量弹窗的时候使用start函数即可。

当然在循环的时候可以使用迭代器/remove来完成,好处是可以实时销毁掉已弹出的组件,不过我没有这个需求就不写了。