GestureDetector简介
GestureDetector
是 Flutter 中一个非常常用的小部件,它提供了许多手势识别的功能,包括点击、双击、长按、拖动、缩放等等。
使用方法
GestureDetector
可以包裹其他部件,当用户在这些部件上进行手势操作时,GestureDetector
会捕捉这些手势操作并触发相应的回调函数。
常用的回调函数
GestureDetector
的构造函数接受一个 GestureDetector.onTap
的回调函数作为参数,这个回调函数会在用户点击该部件时被触发。除了 onTap
外,GestureDetector
还有很多其他的回调函数,包括:
onDoubleTap
:双击回调函数。onLongPress
:长按回调函数。onPanStart
、onPanUpdate
、onPanEnd
:拖动回调函数。onScaleStart
、onScaleUpdate
、onScaleEnd
:缩放回调函数。
除了这些回调函数之外,GestureDetector
还有其他属性,比如:
behavior
:用于控制手势处理的行为,可以是HitTestBehavior.deferToChild
(默认值,将手势传递给子部件),HitTestBehavior.opaque
(将手势作为不透明的处理,不会传递给子部件)或HitTestBehavior.translucent
(将手势作为透明的处理,会传递给子部件)。excludeFromSemantics
:用于控制该部件是否应该在语义树中排除掉。dragStartBehavior
:用于控制拖动开始的行为,可以是DragStartBehavior.start
(默认值,拖动开始时立即触发),DragStartBehavior.down
(仅在手指按下并移动一定距离后触发)或DragStartBehavior.deferred
(仅在手指停止移动后触发)。
举例说明
下面是一个示例代码,演示如何使用 GestureDetector
来捕捉用户的手势操作:
import 'package:flutter/material.dart';class TestPage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: GestureDetector(onTap: () {print('onTap');},onDoubleTap: () {print('onDoubleTap');},onLongPress: () {print('onLongPress');},onPanStart: (DragStartDetails details) {print('onPanStart: $details');},onPanUpdate: (DragUpdateDetails details) {print('onPanUpdate: $details');},onPanEnd: (DragEndDetails details) {print('onPanEnd: $details');},child: Container(width: 200,height: 200,color: Colors.blue,child: Center(child: Text('GestureDetector'),),),),);}
}
效果图如下:
打印如下:
在这个示例中,我们创建了一个 GestureDetector
,并为其设置了多个回调函数,分别对应不同的手势操作。在 child
属性中,我们使用一个 Container
来展示这个 GestureDetector
,当用户在这个 Container
上进行手势操作时,GestureDetector
会捕捉这些操作并触发相应的回调函数。
需要注意的是,GestureDetector
仅能捕捉与其子部件重叠的手势操作。如果需要在整个屏幕上捕捉手势操作,可以使用 GestureDetector
的祖先部件 GestureDetector
或 RawGestureDetector
。
缩放的例子
import 'package:flutter/material.dart';class TestPage extends StatelessWidget {Widget build(BuildContext context) {double scaleFactor = 1.0;Offset offset = Offset(0, 0);return Scaffold(body: GestureDetector(onTap: () {print('onTap');},onDoubleTap: () {print('onDoubleTap');},onLongPress: () {print('onLongPress');},onScaleStart: (ScaleStartDetails details) {print('用户开始缩放');},onScaleUpdate: (ScaleUpdateDetails details) {print('用户缩放中...当前缩放比例:${details.scale}');scaleFactor *= details.scale;},onScaleEnd: (ScaleEndDetails details) {print('用户结束缩放');},child: Transform.scale(scale: scaleFactor,child: Transform.translate(offset: offset,child: Container(width: 200,height: 200,color: Colors.red,),),),),);}
}