Flutter WillPopScope 防退出组件的封装使用

---

前言

在日常开发中，假设在我们使用软件的时候，一不小心碰触到了手机上自带的返回按钮，导致我们的程序突然退出，这种情况的出现，会导致非常不好的用户体验，那么我们该怎么处理这个问题呢？本篇文章将记录 WillPopScope 组件，并完成此组件的封装使用。

---

一、WillPopScope 属性

先来看一下 WillPopScope 组件的源码

  const WillPopScope({
    super.key,
    required this.child,
    required this.onWillPop,
  }) 

WillPopScope 的属性比较简单，就一个child 和一个监听回调属性 onWillPop，onWillPop处理操作并确定页面是否应该弹出或不使用布尔值；如果为真，则页面弹回，如果不是，则保留在同一页面上。

二、WillPopScope 封装

上面我们看了WillPopScope 的属性，现在我们开始来封装，那么怎么判别不是用户主动触发，而是误触呢？根据这个思路，我们先设置一个时间变量，用来记录用户最后触发的时间

  static DateTime? lastTime;

假设用户在第一次触发的时候，我们记录当前时间，在两秒中之内再次触发的时候，允许程序做返回操作，下面来看完整代码

  Future<bool> onWillPop() async {
    if (lastTime == null ||
        DateTime.now().difference(lastTime!) > const Duration(seconds: 2)) {
      lastTime = DateTime.now();
      ToastUtils.showToast(TigerString.exit_tip);

      return false;
    } else {
      return true;
    }
  }

上面代码中，我加了一个提示，即用户第一次触发时的提示引导语，现在我们来使用一下，注意一点，WillPopScope 的使用，是需要包裹整个视图界面的。

  Widget build(BuildContext context) {
    return WillPopScope(
      child: youPageAndChild(),
      onWillPop: onWillPop,
    );
  }

---

总结

当然，这个属性也可以使用在页面的按钮返回之类的任何地方，有兴趣的可以拿去尝试一下，这里就不在做多的介绍。