常用的点击事件有InkWell(内置水波纹效果)和GestureDetector(手势操作),其他无点击事件操作的控件就需要用以上去包裹进行操作,不过还是多根据实际需要去选择使用什么控件吧,下面简略的摘录一下他人对GestureDetector的一些属性详解。
原文链接
一,概述
移动应用中一个必不可少的环节就是与用户的交互,在Flutter中提供的手势检测为GestureDetector。 Flutter中的手势系统分为二层:
第一层是触摸原事件(指针)
PointerDownEvent:用户与屏幕接触产生了联系
PointerMoveEvent:手指已从屏幕上的一个位置移动到另一个位置
PointMoveEvent:指针停止接触屏幕
PointerUpEvent:用户已停止接触屏幕
PointerCanceEvent:此指针的输入不再指向此应用程序
第二层是手势事件(轻击,拖动,缩放)
自带交互的控件监听
RaisedButton、
IconButton、
OutlineButton、
Checkbox、
SnackBar、
Switch等
不自带交互的控件监听
用GestureDelector进行手势检测
用Dismissible实现滑动删除
二,手势事件
1.自带交互的控件
在Flutter中,自带如点击事件的控件有RaisedButton、IconButton、OutlineButton、Checkbox、SnackBar、Switch等,如下面给OutlineButton添加点击事件:
body:Center(
child: OutlineButton(
child: Text('点击我'),
onPressed: (){
Fluttertoast.showToast(
msg: '你点击了FlatButton',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1,
);
}),
),
上面代码就可以捕捉OutlineButton的点击事件。
2.不自带交互的控件
GestureDetector
很多控件不像RaisedButton、OutlineButton等已经对presses(taps)或手势做出了响应。那么如果要监听这些控件的手势就需要用另一个控件GestureDetector,那看看源码GestureDetector支持哪些手势:
GestureDetector({
Key key,
this.child,
this.onTapDown,//按下,每次和屏幕交互都会调用
this.onTapUp,//抬起,停止触摸时调用
this.onTap,//点击,短暂触摸屏幕时调用
this.onTapCancel,//取消 触发了onTapDown,但没有完成onTap
this.onDoubleTap,//双击,短时间内触摸屏幕两次
this.onLongPress,//长按,触摸时间超过500ms触发
this.onLongPressUp,//长按松开
this.onVerticalDragDown,//触摸点开始和屏幕交互,同时竖直拖动按下
this.onVerticalDragStart,//触摸点开始在竖直方向拖动开始
this.onVerticalDragUpdate,//触摸点每次位置改变时,竖直拖动更新
this.onVerticalDragEnd,//竖直拖动结束
this.onVerticalDragCancel,//竖直拖动取消
this.onHorizontalDragDown,//触摸点开始跟屏幕交互,并水平拖动
this.onHorizontalDragStart,//水平拖动开始,触摸点开始在水平方向移动
this.onHorizontalDragUpdate,//水平拖动更新,触摸点更新
this.onHorizontalDragEnd,//水平拖动结束触发
this.onHorizontalDragCancel,//水平拖动取消 onHorizontalDragDown没有成功触发
//onPan可以取代onVerticalDrag或者onHorizontalDrag,三者不能并存
this.onPanDown,//触摸点开始跟屏幕交互时触发
this.onPanStart,//触摸点开始移动时触发
this.onPanUpdate,//屏幕上的触摸点位置每次改变时,都会触发这个回调
this.onPanEnd,//pan操作完成时触发
this.onPanCancel,//pan操作取消
//onScale可以取代onVerticalDrag或者onHorizontalDrag,三者不能并存,不能与onPan并存
this.onScaleStart,//触摸点开始跟屏幕交互时触发,同时会建立一个焦点为1.0
this.onScaleUpdate,//跟屏幕交互时触发,同时会标示一个新的焦点
this.onScaleEnd,//触摸点不再跟屏幕交互,标示这个scale手势完成
this.behavior,
this.excludeFromSemantics = false
})
这里注意:onVerticalXXX/onHorizontalXXX和onPanXXX不能同时设置,如果同时需要水平、竖直方向的移动,设置onPanXXX。
直接上例子:
2.1.onTapXXX
child: GestureDetector(
child: Container(
width: 300.0,
height: 300.0,
color:Colors.red,
),
onTapDown: (d){
print("onTapDown");
},
onTapUp: (d){
print("onTapUp");
},
onTap:(){
print("onTap");
},
onTapCancel: (){
print("onTaoCancel");
},
)
点了一下,并且抬起,结果是:
I/flutter (16304): onTapDown
I/flutter (16304): onTapUp
I/flutter (16304): onTap
先触发onTapDown 然后onTapUp 继续onTap
2.2.onLongXXX
//手势测试
Widget gestureTest = GestureDetector(
child: Container(
width: 300.0,
height: 300.0,
color:Colors.red,
),
onDoubleTap: (){
print("双击onDoubleTap");
},
onLongPress: (){
print("长按onLongPress");
},
onLongPressUp: (){
print("长按抬起onLongPressUP");
},
);
实际结果:
I/flutter (16304): 长按onLongPress
I/flutter (16304): 长按抬起onLongPressUP
I/flutter (16304): 双击onDoubleTap
2.3.onVerticalXXX
//手势测试
Widget gestureTest = GestureDetector(
child: Container(
width: 300.0,
height: 300.0,
color:Colors.red,
),
onVerticalDragDown: (_){
print("竖直方向拖动按下onVerticalDragDown:"+_.globalPosition.toString());
},
onVerticalDragStart: (_){
print("竖直方向拖动开始onVerticalDragStart"+_.globalPosition.toString());
},
onVerticalDragUpdate: (_){
print("竖直方向拖动更新onVerticalDragUpdate"+_.globalPosition.toString());
},
onVerticalDragCancel: (){
print("竖直方向拖动取消onVerticalDragCancel");
},
onVerticalDragEnd: (_){
print("竖直方向拖动结束onVerticalDragEnd");
},
);
输出结果:
I/flutter (16304): 竖直方向拖动按下onVerticalDragDown:Offset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动开始onVerticalDragStartOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.7, 289.3)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.3, 290.0)
I/flutter (16304): 竖直方向拖动更新onVerticalDragUpdateOffset(191.3, 291.3)
I/flutter (16304): 竖直方向拖动结束onVerticalDragEnd
2.4.onPanXXX
//手势测试
Widget gestureTest = GestureDetector(
child: Container(
width: 300.0,
height: 300.0,
color:Colors.red,
),
onPanDown: (_){
print("onPanDown");
},
onPanStart: (_){
print("onPanStart");
},
onPanUpdate: (_){
print("onPanUpdate");
},
onPanCancel: (){
print("onPanCancel");
},
onPanEnd: (_){
print("onPanEnd");
},
);
无论竖直拖动还是横向拖动还是一起来,结果如下:
I/flutter (16304): onPanDown
I/flutter (16304): onPanStart
I/flutter (16304): onPanUpdate
I/flutter (16304): onPanUpdate
I/flutter (16304): onPanEnd
2.5.onScaleXXX
//手势测试
Widget gestureTest = GestureDetector(
child: Container(
width: 300.0,
height: 300.0,
color:Colors.red,
),
onScaleStart: (_){
print("onScaleStart");
},
onScaleUpdate: (_){
print("onScaleUpdate");
},
onScaleEnd: (_){
print("onScaleEnd");
}
);
无论点击、竖直拖动、水平拖动,结果如下:
I/flutter (16304): onScaleStart
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleUpdate
I/flutter (16304): onScaleEnd
用dismissible实现滑动删除
滑动删除模式在很多移动应用中很常见。例如,我们在整理手机通讯录时,希望能快速删除一些联系人,一般手指轻轻一滑即可以实现删除功能。Flutter提供了Dismissible组件使这项任务变得简单。
构造函数
/**
* 滑动删除
*
* const Dismissible({
@required Key key,//
@required this.child,//
this.background,//滑动时组件下一层显示的内容,没有设置secondaryBackground时,从右往左或者从左往右滑动都显示该内容,设置了secondaryBackground后,从左往右滑动显示该内容,从右往左滑动显示secondaryBackground的内容
//secondaryBackground不能单独设置,只能在已经设置了background后才能设置,从右往左滑动时显示
this.secondaryBackground,//
this.onResize,//组件大小改变时回调
this.onDismissed,//组件消失后回调
this.direction = DismissDirection.horizontal,//
this.resizeDuration = const Duration(milliseconds: 300),//组件大小改变的时长
this.dismissThresholds = const <DismissDirection, double>{},//
this.movementDuration = const Duration(milliseconds: 200),//组件消失的时长
this.crossAxisEndOffset = 0.0,//
})
*/
示例demo
/***
* 滑动删除
*/
class MyListView extends StatelessWidget {
var list = ['第一个','第二个','第三个','第四个','第五个','第六个'];
@override
Widget build(BuildContext context) {
// TODO: implement build
return new ListView.builder(
itemCount: list.length,
itemBuilder: (context,index){
var item = list[index];
return new Dismissible(
key: Key(item),
child: new ListTile(
title: new Text(item),
),
onDismissed: (direction){
list.remove(index);
print(direction);
},
background: Container(
color: Colors.red,
child: new Center(
child: new Text('删除',
style: new TextStyle(
color: Colors.white
)
),
),
),
secondaryBackground: new Container(
color: Colors.green,
),
);
},
);
}
}
三,原始指针事件
在移动端,各个平台或UI系统的原始指针事件模型基本都是一致,即:一次完整的事件分为三个阶段:手指按下、手指移动、和手指抬起,而更高级别的手势(如点击、双击、拖动等)都是基于这些原始事件的。
响应流程
当指针按下时,Flutter会对应用程序执行命中测试(Hit Test),以确定指针与屏幕接触的位置存在哪些widget, 指针按下事件(以及该指针的后续事件)然后被分发到由命中测试发现的最内部的widget,然后从那里开始,事件会在widget树中向上冒泡,这些事件会从最内部的widget被分发到widget根的路径上的所有Widget,这和Web开发中浏览器的事件冒泡机制相似, 但是Flutter中没有机制取消或停止冒泡过程,而浏览器的冒泡是可以停止的。
注意,只有通过命中测试的Widget才能触发事件。
事件监听
Flutter中可以使用Listener widget来监听原始触摸事件,它也是一个功能性widget。
Listener({
Key key,
this.onPointerDown, //手指按下回调
this.onPointerMove, //手指移动回调
this.onPointerUp,//手指抬起回调
this.onPointerCancel,//触摸事件取消回调
this.behavior = HitTestBehavior.deferToChild, //在命中测试期间如何表现
Widget child
})
示例demo:
我们先看一个示例,后面再单独讨论一下behavior属性。
//定义一个状态,保存当前指针位置
PointerEvent _event;
...
Listener(
child: Container(
alignment: Alignment.center,
color: Colors.blue,
width: 300.0,
height: 150.0,
child: Text(_event?.toString()??"",style: TextStyle(color: Colors.white)),
),
onPointerDown: (PointerDownEvent event) => setState(()=>_event=event),
onPointerMove: (PointerMoveEvent event) => setState(()=>_event=event),
onPointerUp: (PointerUpEvent event) => setState(()=>_event=event),
),
效果图
手指在蓝色矩形区域内移动即可看到当前指针偏移,当触发指针事件时,参数PointerDownEvent、PointerMoveEvent、PointerUpEvent都是PointerEvent的一个子类,PointerEvent类中包括当前指针的一些信息,如:
position:它是鼠标相对于当对于全局坐标的偏移。
delta:两次指针移动事件(PointerMoveEvent)的距离。
pressure:按压力度,如果手机屏幕支持压力传感器(如iPhone的3D Touch),此属性会更有意义,如果手机不支持,则始终为1。
orientation:指针移动方向,是一个角度值。
上面只是PointerEvent一些常用属性,除了这些它还有很多属性,读者可以查看API文档。
behavior属性
我们重点来介绍一下,它决定子Widget如何响应命中测试,它的值类型为HitTestBehavior,这是一个枚举类,有三个枚举值:
deferToChild:子widget会一个接一个的进行命中测试,如果子Widget中有测试通过的,则当前Widget通过,这就意味着,如果指针事件作用于子Widget上时,其父(祖先)Widget也肯定可以收到该事件。
opaque:在命中测试时,将当前Widget当成不透明处理(即使本身是透明的),最终的效果相当于当前Widget的整个区域都是点击区域。
举个例子:
Listener(
child: ConstrainedBox(
constraints: BoxConstraints.tight(Size(300.0, 150.0)),
child: Center(child: Text("Box A")),
),
//behavior: HitTestBehavior.opaque,
onPointerDown: (event) => print("down A")
),
上例中,只有点击文本内容区域才会触发点击事件,因为 deferToChild 会去子widget判断是否命中测试,而该例中子widget就是 Text(“Box A”) 。 如果我们想让整个300×150的矩形区域都能点击我们可以将behavior设为HitTestBehavior.opaque。
注意,该属性并不能用于在Widget树中拦截(忽略)事件,它只是决定命中测试时的Widget大小。
translucent:当点击Widget透明区域时,可以对自身边界内及底部可视区域都进行命中测试,这意味着点击顶部widget透明区域时,顶部widget和底部widget都可以接收到事件,例如:
Stack(
children: <Widget>[
Listener(
child: ConstrainedBox(
constraints: BoxConstraints.tight(Size(300.0, 200.0)),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.blue)),
),
onPointerDown: (event) => print("down0"),
),
Listener(
child: ConstrainedBox(
constraints: BoxConstraints.tight(Size(200.0, 100.0)),
child: Center(child: Text("左上角200*100范围内非文本区域点击")),
),
onPointerDown: (event) => print("down1"),
//behavior: HitTestBehavior.translucent, //放开此行注释后可以"点透"
)
],
)
上例中,当注释掉最后一行代码后,在左上角200*100范围内非文本区域点击时(顶部Widget透明区域),控制台只会打印“down0”,也就是说顶部widget没有接收到事件,而只有底部接收到了。当放开注释后,再点击时顶部和底部都会接收到事件,此时会打印:
I/flutter ( 3039): down1
I/flutter ( 3039): down0
如果behavior值改为HitTestBehavior.opaque,则只会打印"down1"。
忽略PointerEvent
假如我们不想让某个子树响应PointerEvent的话,我们可以使用IgnorePointer和AbsorbPointer,这两个Widget都能阻止子树接收指针事件,不同之处在于AbsorbPointer本身会参与命中测试,而IgnorePointer本身不会参与,这就意味着AbsorbPointer本身是可以接收指针事件的(但其子树不行),而IgnorePointer不可以。
一个简单的例子如下:
Listener(
child: AbsorbPointer(
child: Listener(
child: Container(
color: Colors.red,
width: 200.0,
height: 100.0,
),
onPointerDown: (event)=>print("in"),
),
),
onPointerDown: (event)=>print("up"),
)
点击Container时,由于它在AbsorbPointer的子树上,所以不会响应指针事件,所以日志不会输出"in",但AbsorbPointer本身是可以接收指针事件的,所以会输出"up"。如果将AbsorbPointer换成IgnorePointer,那么两个都不会输出。
来源:CSDN
作者:lyj1005353553
链接:https://blog.csdn.net/lyj1005353553/article/details/103684725