1 概述

Flutter中的手势分为两层，第一层是触摸原始指针(Pointer)事件，描述了屏幕上指针（如触摸、鼠标和触控笔）的位置和移动。
指针(Pointer)代表用户与屏幕交互的原始数据，有四种事件类型：

PointerDownEvent: 指针接触到屏幕
PointerMoveEvent: 指针从屏幕上的一个位置移动到另一个位置
PointerUpEvent: 指针停止接触屏幕
PointerCancelEvent: 指针的输入事件不再针对此应用(事件取消)

第二层就是我们可以检测到的手势，主要分为三大类：轻击、拖动和缩放。

2 GestureDetector

GestureDetector可以进行手势检测，如单击，双击，长按，垂直、水平拖动等。

GestureDetector事件描述

事件名	描述
onTapDown	点击屏幕立即触发
onTapUp	手指离开屏幕
onTap	点击屏幕
onTapCancel	点击事件结束，onTapDown不会再触发点击事件
onDoubleTap	快速连续两次在同一位置点击屏幕
onLongPress	长按
onVerticalDragStart	与屏幕接触，可能会开始垂直移动
onVerticalDragUpdate	与屏幕接触，已经沿垂直移动
onVerticalDragEnd	先前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动
onHorizontalDragStart	与屏幕接触，可能会开始水平移动
onHorizontalDragUpdate	与屏幕接触，已经沿水平移动
onHorizontalDragEnd	先前与屏幕接触并水平移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动

3 Dissmissible

可用于实现滑动删除。

常见属性

属性名	类型	说明
onDismissed	DismissDirectionCallback	当包裹的组件消失后回调
movementDuration	Duration	定义组件消失的时长
onResize	VoidCallback	组件大小改变时的回调
resizedDuration	Duration	组件大小改变时长
child	Widget	子元素，滑动时显示的组件

4 示例1-实现点击效果

import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: HomePage(),));class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: MyButton(),),);}
}class MyButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {print('onTap');},child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(15.0),color: Theme.of(context).buttonColor,),padding: EdgeInsets.all(20.0),child: Text('MyButton'),),);}
}

5 示例2-实现滑动删除

import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: HomePage(),));class HomePage extends StatelessWidget {final List<String> items = List.generate(20, (index) => 'item $index');@overrideWidget build(BuildContext context) {return Scaffold(body: ListView.builder(itemCount: items.length,itemBuilder: (context, index) {final item = items[index];return Dismissible(onDismissed: (_) {items.removeAt(index);},movementDuration: Duration(milliseconds: 100),key: Key(item),child: ListTile(title: Text('$item'),),background: Container(color: Color(0xffff0000),),);},),);}
}

Flutter 手势篇相关推荐

Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法
版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.jianshu.com/p/3d927a7bf020 转载请标明出处: https://www.jianshu.com/p/ ...
Flutter手势密码插件从开发到发布至pub仓库
前言本篇记录的是使用Flutter完成手势密码的功能,大致效果如下图所示: 该手势密码的功能比较简单,下面会详细记录实现的过程,另外还会简单说明如何将该手势密码作为插件发布到pub仓库. 开始实现 ...
【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )
文章目录一.Flutter 点击事件处理二.GestureDetector 常用事件说明三.完整代码示例四.相关资源一.Flutter 点击事件处理 Flutter 点击事件处理的组件是 G ...
写一个Flutter手势追踪插件
/ 今日科技快讯 / 近日字节跳动组织升级,张利东担任字节跳动(中国)董事长,全面协调公司运营,包括字节跳动中国的战略.商业化.公共事务.公共关系.财务.人力:抖音CEO张楠将担任字节跳动(中 ...
【flutter】篇8-2：Animations
官方文档 animations分为两种, 一种是code-based,关注的是widget,分为explicit animation和implicit animation 还有一种是drawing-b ...
Flutter 手势GestureDetector解析
对于移动端的开发者来说,手势是一个非常重要的模块,基本上做任何App都会遇到各种各样的手势问题,而手势也是移动的一个不算小的模块吧,要彻底搞得还是得费一些时间的,如果之前对Android或者IOS的手 ...
深入理解Flutter手势系统
导语 | Flutter作为一个跨平台开发框架,手势识别被放在Dart层.事件的收集和传递依赖各平台的不同实现,并将屏蔽事件对象的差异,统一转换为Flutter可识别的事件对象.Flutter采用竞技 ...
Flutter入门篇（一）
距离Google发布Flutter已经有很长一段时间了,又是一门新的技术,那么我们到底是学呢还是学呢还是学呢?不要问我,我不知道,鬼特么知道我这辈子还要学习多少东西.其实新技术的出现也意味着,老技术会 ...
flutter打包的app有多大_前端大势所趋---Flutter 这篇文章会让你行动起来
Flutter和原生APP的性能对比前言自从今年google IO大会推出flutter跨平台开发框架以来,flutter在各个技术论坛里被吵得如日中天.flutter团队直言flutter可以帮 ...

Flutter 手势篇

文章目录