Flutter实现手势识别功能详解方法
作者：@我不认识你 发布时间：2022-12-21 15:41:41
GestureDetector
GestureDetector 是手势识别的组件，可以识别点击、双击、长按事件、拖动、缩放等手势
点击事件
点击相关事件包括：
onTapDown：按下时回调。
onTapUp：抬起时回调。
onTap：点击事件回调。
onTapCancel：点击取消事件回调。
按下然后抬起调用顺序
onTapDown-> onTapUp-> onTap
按下后移动调用顺序
onTapDown-> onTapCancel
示例
class _YcHomeBodyState extends State<YcHomeBody> {
String desc = '';
Color containerColor = Colors.red;
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Column(
children: [
Container(
width: 420,
height: 330,
color: containerColor,
),
const SizedBox(
width: 100,
height: 20,
),
Text("点击事件：$desc")
],
),
onTapDown: (TapDownDetails tapDownDetails) {
setState(() {
desc += '按下,';
containerColor = Colors.blue;
});
},
onTapUp: (TapUpDetails tapUpDetails) {
setState(() {
desc += '抬起,';
containerColor = Colors.red;
});
},
onTap: () {
setState(() {
desc += '点击,';
containerColor = Colors.yellow;
});
},
onTapCancel: () {
setState(() {
desc += '取消,';
containerColor = Colors.pink;
});
},
);
}
}
双击事件
双击是快速且连续2次在同一个位置点击，双击监听使用onDoubleTap方法
return GestureDetector(
child: Column(
children: [
Container(
width: 420,
height: 330,
color: containerColor,
),
const SizedBox(
width: 100,
height: 20,
),
Text("点击事件：$desc")
],
),
onDoubleTap: () {
setState(() {
desc = '双击了';
});
},
长按事件
长按事件（LongPress）包含长按开始、移动、抬起、结束事件，说明如下：
onLongPressStart：长按开始事件回调。
onLongPressMoveUpdate：长按移动事件回调。
onLongPressUp：长按抬起事件回调。
onLongPressEnd：长按结束事件回调。
onLongPress：长按事件回调。
示例
return GestureDetector(
child: Column(
children: [
Container(
width: 420,
height: 330,
color: containerColor,
),
const SizedBox(
width: 100,
height: 20,
),
Text("点击事件：$desc")
],
),
onLongPressStart: (v) {
setState(() {
desc += '长按开始,';
print("长按开始：$v");
});
},
onLongPressMoveUpdate: (v) {
setState(() {
desc += '长按移动,';
print("长按移动：$v");
});
},
onLongPressUp: () {
setState(() {
desc += '长按抬起,';
print("长按抬起");
});
},
onLongPressEnd: (v) {
setState(() {
desc += '长按结束,';
print("长按结束：$v");
});
},
onLongPress: () {
setState(() {
desc += '长按回调,';
print("长按回调");
});
});
执行顺序
1、长按开始->回调->结束->抬起
2、长按开始->回调->移动->结束->抬起
水平/垂直拖动事件
垂直/水平拖动事件包括按下、开始、移动更新、结束、取消事件，以垂直为例说明如下：
onVerticalDragDown：垂直拖动按下事件回调
onVerticalDragStart：垂直拖动开始事件回调
onVerticalDragUpdate：指针移动更新事件回调
onVerticalDragEnd：垂直拖动结束事件回调
onVerticalDragCancel：垂直拖动取消事件回调
GestureDetector(
onVerticalDragStart: (v) => print('onVerticalDragStart'),
onVerticalDragDown: (v) => print('onVerticalDragDown'),
onVerticalDragUpdate: (v) => print('onVerticalDragUpdate'),
onVerticalDragCancel: () => print('onVerticalDragCancel'),
onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
缩放事件
缩放（Scale）包含缩放开始、更新、结束。说明如下：
onScaleStart：缩放开始事件回调。
onScaleUpdate：缩放更新事件回调。
onScaleEnd：缩放结束事件回调。
GestureDetector(
onScaleStart: (v) => print('onScaleStart'),
onScaleUpdate: (ScaleUpdateDetails v) => print('onScaleUpdate'),
onScaleEnd: (v) => print('onScaleEnd'),
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
)
InkWell
InkWell 组件在用户点击时出现“水波纹”效果。事件和属性挺多的，就看一下常用的
设置水波纹颜色
点击和长按都能够触发水波纹，点击波纹效果快，长按波纹效果慢
return InkWell(
onTap: (){
print("点击了");
},
splashColor: Colors.red,
child: const Text('点击InkWell，水波纹'),
);
给字体添加边距和圆角边框，扩大“水波纹”效果：
Center(
child: InkWell(
onTap: () {
print("点击了");
},
splashColor: Colors.red,
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: const BorderRadius.all(Radius.circular(20))),
child: const Text('点击InkWell，水波纹'))),
);
可以看到水波纹会超出圆角，为了解决这个问题可以使用Ink
Ink
Ink控件用于在[Material]控件上绘制图像和其他装饰，以便[InkWell]、[InkResponse]控件的“水波纹”效果在其上面显示。
return Center(
child: Ink(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: InkWell(
borderRadius: const BorderRadius.all(Radius.circular(20)),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
child: const Text(
'这是InkWell的点击效果',
style: TextStyle(color: Colors.white),
),
),
onTap: () {},
),
));
}
总感觉有点复杂，InkWell 会导致水纹超出边框，就需要外面再套一层组件，然后还要写个渐变，不知道咋形容。
Listener
Listener 是一个监听指针事件的控件，比如按下、移动、释放、取消等指针事件，但Listener无法监听鼠标特有的事件，比如：移入、悬停、移出事件。鼠标事件使用MouseRegion监听。
通常情况下，监听手势事件使用GestureDetector，GestureDetector是更高级的手势事件。
Listener的事件介绍如下：
onPointerDown：按下时回调
onPointerMove：移动时回调
onPointerUp：抬起时回调
Listener(
onPointerDown: (PointerDownEvent pointerDownEvent) {
print('$pointerDownEvent');
},
onPointerMove: (PointerMoveEvent pointerMoveEvent) {
print('$pointerMoveEvent');
},
onPointerUp: (PointerUpEvent upEvent) {
print('$upEvent');
},
child: Container(
height: 200,
width: 200,
color: Colors.blue,
alignment: Alignment.center,
),
)
常用属性说明如下：
position：相对屏幕的坐标的偏移。
localPosition：相对当前控件的偏移。
pressure：按压力度。
delta：2次指针移动事件的偏移。
orientation：指针移动方向
案例
进度按钮
// 使用枚举定义按钮的状态
enum ButtonStates { none, loading, done }
class YcHomeBody extends StatefulWidget {
const YcHomeBody({Key? key}) : super(key: key);
@override
State<YcHomeBody> createState() => _YcHomeBodyState();
}
class _YcHomeBodyState extends State<YcHomeBody> {
//定义按钮的状态
ButtonStates _buttonStates = ButtonStates.none;
@override
Widget build(BuildContext context) {
return Center(
child: MaterialButton(
color: Colors.blue,
textColor: Colors.white,
minWidth: 200,
height: 40,
//通过自定义方法，根据情况返回相应的组件
child: _build(),
onPressed: () {
//点击按钮后将按钮状态变为加载中
setState(() {
_buttonStates = ButtonStates.loading;
//延迟2s后将状态变为完成
Future.delayed(const Duration(seconds: 2), () {
setState(() {
_buttonStates = ButtonStates.done;
});
});
});
},
),
);
}
//自定义方法
_build() {
if (_buttonStates == ButtonStates.none) {
//无状态
return const Text("登录");
} else if (_buttonStates == ButtonStates.loading) {
//进度条组件
return const CircularProgressIndicator(
backgroundColor: Colors.white,
strokeWidth: 2,
);
} else if (_buttonStates == ButtonStates.done) {
return const Icon(
Icons.check,
color: Colors.white,
);
}
}
}
代码看着很长但是逻辑很简单，定义了一个枚举类型的按钮类型。一开始类型为无状态，此时显示登录；当点击按钮后，状态变为加载中，显示圆形进度条组件；2s后将按钮状态变为加载完成，现成完成的图标
来源：https://blog.csdn.net/weixin_41897680/article/details/127778262
0
投稿猜你喜欢
- 概念IO流可以初步的理解为数据间的传输,我们将一组数据入:1234567,将他们从hello文件中转入haha文件中,使用程序的方法进行转入
- 本文实例讲述了C#实现简单合并word文档的方法。分享给大家供大家参考。具体如下：using System;using System.Col
实践过程效果代码public partial class Form1 : Form{ public Form1()- Elasticsearch简介Elasticsearch是什么？它能干什么？Elasticsearch（以下称之为ES）是一款基于Lucen
- spring boot security设置忽略地址不生效最近在试下微服务改造，出现这样一个问题所有请求都经过spring cloud ga
- 方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现。重写(Overriding)是父类与子类之间多
- 一、async和await特性的结构1. 异步和同步同步方法：如果一个方法被调用了，等待其执行所有处理后调用方法才继续执行的方法。异步方法：
- google benchmark已经为我们提供了类似的功能，而且使用相当简单。具体的解释在后面，我们先来看几个例子，我们人为制造几个时间复杂
- SpringAOP的介绍：传送门demo介绍主要通过自定义注解，使用SpringAOP的环绕通知拦截请求，判断该方法是否有自定义注解，然后判
- 一般情况下每个spring boot工程启动都有固定的端口，但是固定端口不利用服务的动态扩容，如果在一台服务器上需要对同一个服务进行多实例部
- 本文实例讲述了C#实现回文检测的方法。分享给大家供大家参考。具体分析如下：回文：称正读和反读都相同的字符序列为“回文”，如“abba”、“a
- 这篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来
- 前言 之前unity5.x在代码中写了debug.log..等等，打
- 自定义 webflux 容器配置配置代码@Componentpublic class ContainerConfig extends Rea
- java 中HashCode重复的可能性今天有同事提议用String的hashcode得到int类型作为主键。其实hashcode重复的可能
- 夏天到了、小雪来给大家降降温话不多说、直接进入主题主要功能模块设计：登录注册、首页信息浏览、选课分类查看、选课详情查看、评论交流、收藏、浏览
- 背景SpringBoot 版本<parent> <groupId>org.springfr
- C# 自带的HttpWebRequest效率太低，对于自组HTTP封包不好操作。在写超级SQL注入工具时，研究了很长一段时间如何使用Sock
- 这篇文章主要介绍了如何使用SpEL表达式实现动态分表查询,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 本文实例讲述了C#检查键盘大小写锁定状态的方法。分享给大家供大家参考。具体分析如下：1、命名空间：using System.Runtime.
