Flutter 功能型组件:WillPopScope

前言

为了避免用户误触返回按钮而导致APP退出,在很多APP中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触)。Flutter中可以通过WillPopScope来实现返回按钮拦截。

接口描述

const WillPopScope({
    Key key,
    @required this.child,
    // onWillPop是一个回调函数,当用户点击返回按钮时被调用(包括导航返回按钮及Android物理返回按钮)。
    // 该回调需要返回一个Future对象,如果返回的Future最终值为false时,则当前路由不出栈(不会返回);最终值为true时,当前路由出栈退出。我们需要提供这个回调来决定是否退出。
    @required this.onWillPop,
  })

代码示例

// 导航返回拦截(WillPopScope)

// 为了避免用户误触返回按钮而导致APP退出,在很多APP中都拦截了用户点击返回键的按钮,然后进行一些防误触判断,比如当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触)。

// 例子:为了防止用户误触返回键退出,我们拦截返回事件。当用户在1秒内点击两次返回按钮时,则退出;如果间隔超过1秒则不退出,并重新记时。
import 'package:flutter/material.dart';

class WillPopScopeTest extends StatefulWidget{
  WillPopScopeTestState createState() => WillPopScopeTestState();
}

class WillPopScopeTestState extends State<WillPopScopeTest>{
  // 上次点击时间
  DateTime _lastPressedAt;

  Widget build(BuildContext context){
    return WillPopScope(
      onWillPop: () async{
        if(_lastPressedAt == null || DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)){
          // 两次点击间隔超过1秒则重新计时
          _lastPressedAt = DateTime.now();
          return false;
        }
        return true;
      },
      child: Container(
        alignment: Alignment.center,
        child: Text('1秒内连续按两次返回键退出'),
      ),
    );
  }
}

总结

无。

原文地址:https://www.cnblogs.com/parzulpan/p/12196900.html

时间: 2024-10-31 15:04:24

Flutter 功能型组件:WillPopScope的相关文章

Flutter 功能型组件:跨组件状态共享(Provider)

前言 ??在Flutter开发中,状态管理是一个永恒的话题. ??一般的原则是:如果状态是组件私有的,则应该由组件自己管理:如果状态要跨组件共享,则该状态应该由各个组件共同的父元素来管理. ??对于组件私有的状态管理很好理解,但对于跨组件共享的状态,管理的方式就比较多了,如使用全局事件总线EventBus,它是一个观察者模式的实现,通过它就可以实现跨组件状态同步:状态持有方(发布者)负责更新.发布状态,状态使用方(观察者)监听状态改变事件来执行一些操作. ??但是观察者模式来实现跨组件状态共享有

Flutter 功能型组件:异步UI更新(FutureBuilder\StreamBuilder)

前言 很多时候会依赖一些异步数据来动态更新UI,比如在打开一个页面时我们需要先从互联网上获取数据,在获取数据的过程中我们显示一个加载框,等获取到数据时我们再渲染页面:又比如想展示Stream(比如文件流.互联网数据接收流)的进度.当然,通过StatefulWidget完全可以实现上述这些功能.但由于在实际开发中依赖异步数据更新UI的这种场景非常常见,因此Flutter专门提供了FutureBuilder和StreamBuilder两个组件来快速实现这种功能. 接口描述 FutureBuilder

Flutter 可滚动组件:ScrollController

前言 可以用ScrollController来控制可滚动组件的滚动位置. 接口描述 ScrollController({ // 初始滚动位置 double initialScrollOffset = 0.0, // 是否保持滚动位置 this.keepScrollOffset = true, this.debugLabel, }) 代码示例 // ScrollController // 可以用ScrollController来控制可滚动组件的滚动位置. import 'package:flutt

flutter 输入框组件封装

一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何控制输入框的回调函数 二.快速创建自定义组件 vscode中使用快捷键stl快速生成一个无状态组件, class CreateMyInput extends StatelessWidget { @override Widget build(BuildContext context) { return Container( );

flutter 图片组件

加入图片的几种方式 Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径. Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址. Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关. Image.memory: 加载Uint8List资源图片,不怎么使用 Image 组件的常用属性: fit属性的设置 fit属性可以控制图片的拉伸

flutter常用组件

TextWidget  文本组件 TextWidget  的常用属性 TextAlign: 下面的五种对齐方式 左对齐, 右对齐, 居中对齐, 从开始位置对齐 MaxLines: 显示几行 overflow: 超出范围截取后的样式 clip 直接阶段, ellipsis 后面省略号... fade 超出后渐变, decoration : underline 下划线 linethrough 中间穿过 none 不显示 overline 上划线 decorationStye: 下划线样式 dashe

Flutter——Expanded组件(&quot;可伸缩&quot;组件)

Expanded组件可以结合Row和Column布局组件使用. Expanded组件的常用属性 属性 说明 flex 元素占整个父Row/Column的比例 child 子元素 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "ExpandedWidget", home: MyApp(), )); } class MyApp extends StatelessWidget

Flutter——AspectRatio组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域. 如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率. AspectRatio组件常用的属性: 属性 说明 aspectRatio 宽高比,最终可能不会根据这个值去布

Flutter——AppBar组件(顶部导航组件)

AppBar组件的常用属性如下: 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可以放组件 actions 通常使用 IconButton 来表示,可以放按钮组 bottom 通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle 标题是否居中显示 i