【Flutter学习】Flutter中的手势处理
前言
移动应用的一个必不可少的环节就是与用户的交互,在Android中提供了手势检测,并为手势检测提供了相应的监听。本文将介绍Flutter中手势检测GestureDetector。
Flutter中的手势系统分为两层,第一层是触摸原事件(指针),有相应的四种事件类型。
PointerDownEvent :用户与屏幕接触产生了联系。PointerMoveEvent :手指已从屏幕上的一个位置移动到另一个位置。PointerUpEvent :用户已停止接触屏幕。PointerCancelEvent:此指针的输入不再指向此应用程序。
第二层就是我们可以检测到的手势,主要分为三大类,包括轻击,拖动和缩放,下面是具体的手势监听方法。
点击:
onTapDown : 点击屏幕立即触发此方法onTapUp : 手指离开屏幕onTap : 点击屏幕立即触发此方法。onTapCancel :此次点击事件结束,onTapDown不会在产生点击事件
双击:
onDoubleTap : 用户快速连续两次在同一位置点击屏幕。
长按:
onLongPress :长时间保持与相同位置的屏幕接触
垂直拖动:
onVerticalDragStart : 与接触屏幕,可能会开始垂直移动onVerticalDragUpdate : 与屏幕接触并垂直移动的指针在垂直方向上移动onVerticalDragEnd : 之前与屏幕接触并垂直移动的指针不再与屏幕接触,并且在停止接触屏幕时以特定速度移动
水平拖动:
onHorizontalDragStart : 与接触屏幕,可能开始水平移动onVerticalDragUpdate : 与屏幕接触并水平移动的指针在水平方向上移动onVerticalDragEnd : 先前与屏幕接触并且水平移动的指针不再与屏幕接触,并且当它停止接触屏幕时以特定速度移动
上面介绍的就是Flutter的GestureDetector提供的三种手势检测相应的监听方法。来看个Demo。
import 'package:flutter/material.dart';
void main() =>
runApp(new MaterialApp(
home: new MyApp()
));
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return new GestureDetector(
//点击
onTap: () {
print("文本点击了");
},
//长按
onLongPress: () {
print("长按文本");
},
//横向拖动的开始状态
onHorizontalDragStart: (startDetails) {
print(startDetails.globalPosition);
},
//横向拖动的结束状态
onHorizontalDragEnd: (endDetails) {
print(endDetails);
},
//缩放开始状态
onScaleStart: (startScaleDetails) {
print(startScaleDetails);
},
//缩放结束状态
onScaleEnd: (endScaleDetails) {
print(endScaleDetails);
},
child: new Container(
color: Color.fromARGB(255, 220, 220, 220),
child: new Center(
child: new Text("Flutter手势"),
)
),
);
}


上述可见,当用户进行手势操作时,系统会确定与屏幕接触的坐标位置上有哪些组件,将手势事件进行回调处理。
更多推荐



所有评论(0)