正文
flutter手势图解的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Flutter了解之手势
描述了屏幕上指针（触摸、鼠标、触控笔）的位置和移动。
Flutter中可以使用Listener(功能性组件)来监听原始触摸事件
例1
例2
例3
忽略PointerEvent
手势: 描述由一个或多个指针移动组成的语义动作，如拖动、缩放、双击等。
Material大多数widget已经对tap或手势做出了响应。 例如 IconButton和 FlatButton 响应单击，ListView响应滑动事件触发滚动。
用于手势识别的功能性组件，通过它可以来识别各种手势。
例（单击）
例（添加Material触摸水波效果 InkWell组件）
例（滑动关闭 Dismissable组件）
例（单击、双击、长按）
例（滑动）
例（扫动---单一方向）
例（缩放）
GestureRecognizer是一个抽象类。
一种手势的识别器对应一个GestureRecognizer的子类。
例
由于手势竞争最终只有一个胜出者，所以，当有多个手势识别器时，可能会产生冲突。
例
例
在APP中经常会需要一个广播机制，用以跨页面通知。比如一个需要登录的APP中，页面会关注用户登录或注销事件，来进行一些状态更新。
这时候，一个事件总线便会非常有用，事件总线通常实现了订阅者模式，订阅者模式包含发布者和订阅者两种角色，可以通过事件总线来触发事件和监听事件。
对于一些简单的应用，事件总线是足以满足业务需求的，如果决定使用状态管理包的话，一定要想清楚APP是否真的有必要使用它，防止“化简为繁”、过度设计。
例
在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。
Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。
通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。
通知冒泡和Web开发中浏览器事件冒泡原理是相似的，都是事件从出发源逐层向上传递，可以在上层节点任意位置来监听通知/事件，也可以终止冒泡过程，终止冒泡后，通知将不会再向上传递。
Flutter的UI框架实现中，除了在可滚动组件在滚动过程中会发出ScrollNotification之外，还有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，Flutter正是通过这种通知机制来使父元素可以在一些特定时机来做一些事情。
例
例
例
阻止冒泡
通知冒泡原理
相关问答
Q1: Flutter（五）手势GestureDetector
在Android中，每一个 View 都可以通过 onTouch 方法重写其触摸事件，也可以通过 setOnClickListener 方法来给 View 设置点击事件。但是Flutter中除了少部分组件，如 Button 相关的组件可以直接通过 onPressed 实现点击事件。其余组件想实现点击、长按等事件，都需要借助 GestureDetector 来实现手势监听
下面介绍比较常用的手势如 onTap （点击）、 onDoubleTap （双击）、 onLongPress （长按）
小球跟随手指移动的实现应该是属于各种移动端框架作为了解拖动手势的的典型案例，下面我们来看看用flutter如何实现小球跟随手指移动
拖动手势主要由 onPanDown （手指按下）、 onPanUpdate （手指滑动）、 onPanEnd （滑动结束）构成
缩放手势需要用到 onScaleUpdate 方法，下面是一个简单的图片缩放的实现
Q2: Flutter手势（粘贴即用 flutter 1.22.6）
import 'package:flutter/material.dart';
void main() = runApp(MyApp());
class MyAppextends StatelessWidget {
// This widget is the root of your application.
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home:HYHomePage(),
);
}
}
class HYHomePageextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text("列表测试"),
),
body:GestureDemo(),
// Center(
// child: Stack(
// alignment: Alignment.center,
// children: [
// GestureDetector(
// onTapDown: (details) {
// print("outer click");
// },
// child: Container(
// width: 200,
// height: 200,
// color: Colors.yellow,
// alignment: Alignment.center,
// ),
// ),
// IgnorePointer(
// child: GestureDetector(
// onTapDown: (details) {
// print("inner click");
// },
// child: Container(
// width: 100,
// height: 100,
// color: Colors.red,
// ),
// ),
// )
// ],
// ),
// ),
);
}
}
class GestureDemoextends StatelessWidget {
const GestureDemo({
Key key,
}) :super(key: key);
@override
Widgetbuild(BuildContext context) {
return Center(
child:GestureDetector(
onTapDown: (details) {
print("手指按下");
print(details.globalPosition);
print(details.localPosition);
},
onTapUp: (details) {
print("手指抬起");
},
onTapCancel: () {
print("手势取消");
},
onTap: () {
print("手势点击");
},
onDoubleTap: () {
print("手指双击");
},
onLongPress: () {
print("长按手势");
},
onPanUpdate: (value){
print('当前我在滑动$value');
},
child:Container(
width:200,
height:200,
color: Colors.orange,
),
),
);
}
}
class ListenerDemoextends StatelessWidget {
const ListenerDemo({
Key key,
}) :super(key: key);
@override
Widgetbuild(BuildContext context) {
return Listener(
onPointerDown: (event) {
print("指针按下:$event");
print(event.position);
print(event.localPosition);
},
onPointerMove: (event) {
// print("指针移动:$event");
},
onPointerUp: (event) {
// print("指针抬起:$event");
},
child:Container(
width:200,
height:200,
color: Colors.red,
),
);
}
}
