第二百八十四回

文章目录

  • 概念介绍
  • 使用方法
  • 示例代码

我们在上一章回中介绍了下拉刷新组件相关的内容,本章回中将介绍WillPopScope组件.闲话休提,让我们一起Talk Flutter吧。

第二百八十四回_第1张图片

概念介绍

我们在本章回中介绍的WillPopScope组件是一种事件拦截类组件,它没有具体的物理形态,也就是说我们在页面中看不到它。该组件主要用来拦截返回按钮发出的事件。
本章回中将详细介绍它的使用方法。

使用方法

和其它组件一样,WillPopScope组件提供了相关的属性来控制自己,下面是该组件的属性:

  • onWillPop属性:该属性是方法类型,点击返回按钮时回调此方法;
  • child属性:用来存放其它组件,它会拦截该属性所指页面中的返回按钮事件;
    该组件只有这两个属性,不过它们都是必选属性。我们重点介绍一下第一个属性,该属性对应的方法会返回一个bool值,返回true表示拦截返回按钮发出的事件,此时
    不会返回上一级页面。反之表示不拦截返回按钮发出的事件,可以正常返回上一级页面。我们可以依据业务的需求来决定是否拦截返回按钮发出的事件。接下来我们将通过
    具体的代码来演示该组件的使用方法。

示例代码

  Future<bool> _backIconOnPress() async {
    ///两次点击间隔小于3s时才退出当前页面:return true;
    if(_lastPressedTime == null
        || DateTime.now().difference(_lastPressedTime!) > const Duration(seconds: 3)) {
      _lastPressedTime = DateTime.now();
      debugPrint('false');
      return Future.value(false);
    }else {
      debugPrint('true');
      return Future.value(true);
    }
  }

  
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _backIconOnPress,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Example of WillPopScope Widget'),
          backgroundColor: Colors.purpleAccent,
        ),
        body: const Center(
            child: Text('连续两次点击小于3s时才能退出页面'),
        ),
      ),
    );
  }

在上面的示例代码中,WillPopScope组件封装了Scaffold组件,因此它会拦截Scaffold页面中返回按钮发出的事件。我们把该组件onWillPop属性对应的方法封装
为独立的方法,这个从代码中也可以看到,该方法中的业务逻辑是:连续两次点击返回按钮小于3s时才能退出页面。这个逻辑参考了wendu共享的《Flutter实战》,大家
可以依据自己的业务逻辑来拦截页面中返回按钮发出的事件。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
看官们,与"WillPopScope组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,javascript,前端,android)