androidflutter :事件、手势处理
本节学习老孟《flutter 实战入门》
Flutter的手势系统油两层:第一层为原始指针(pointer)事件,包括指针的位置和移动;第二层为手势,手势由一个或者多个指针事件组成的语义动作,例如点击、拖动、缩放等。手势是系统封装了事件的结果,方便开发者进行开发。
一、GestureDetector
GestureDetector是手势识别组件。一个完整的手势包括多个事件,例如,点击事件包含指针按下、抬起事件。GestureDetector包含各种手势,例如点击、双击、长按、拖动、缩放等。
1、点击
点击手势包含按下、抬起、点击、点击取消事件。

点击调用顺序为:onTapDown->onTapUp->onTap。
按下后移动指针,调用顺序为:onTapDown->onTapCancel。
body: GestureDetector(
onTapDown: (TapDownDetails tapDownDetails) {
print('onTapDown');
},
onTapUp: (TapUpDetails tapUpDetails) {
print('onTapUp');
},
onTap: () {
print('onTap');
},
onTapCancel: () {
print('onTapCancel');
},
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
2、双击
使用onDoubleTap事件进行监听。同时监听onTap和onDoubleTap事件,只会触发一个事件,如果监听onDoubleTap事件,那么onTap将会延迟触发,因为系统将会待一段事件再来判断是否为onDoubleTap事件。如果用户只监听了onTap事件,则没有延迟。
body: GestureDetector(
onDoubleTap: () =>print('onDoubleTab'),
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
3、长按事件

用户按下-移动-抬起的过程调用顺序:onLongPressStart->onLongPress->onLongPressMoveUpdate->…->onLongPressMoveUpdate->onLongPressEnd->onLongPressUp.
body: GestureDetector(
onLongPressStart: (v)=>print('onLongPressStart'),
onLongPress: ()=>print('onLongPress'),
onLongPressMoveUpdate: (v)=>print('onLongPressMoveUpdate'),
onLongPressEnd: (v)=>print('onLongPressEnd'),
onLongPressUp: ()=>print('onLongPressUp'),
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
4、垂直/水平拖动事件

用户垂直方向拖动事件回调顺序为:onVerticalDragDown->onVerticalDragStart->onVerticalDragUpdate->…->onVerticalDragUpdate->onVerticalDragEnd.水平拖拽一样。
body: GestureDetector(
onVerticalDragDown: (v)=>print('onVerticalDragDown'),
onVerticalDragStart: (v)=>print('onVerticalDragStart'),
onVerticalDragUpdate: (v)=>print('onVerticalDragUpdate'),
onVerticalDragEnd: (v)=>print('onVerticalDragEnd'),
onVerticalDragCancel: ()=>print('onVerticalDragCancel'),
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
5、缩放

body: GestureDetector(
onScaleStart: (v)=>print('onScaleStart'),
onScaleUpdate: (v)=>print('onScaleUpdate'),
onScaleEnd: (v)=>print('onScaleEnd'),
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
二、GestureRecognizer
GestureRecognizer本身不是一个Widget。
//按下字体为红色,放开为黄色
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
String _storageDir = '';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: GestureRecognizerDemo(),
);
}
}
class GestureRecognizerDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _GestureRecognizerDemo();
throw UnimplementedError();
}
}
class _GestureRecognizerDemo extends State<GestureRecognizerDemo> {
var _tapGestureRecognizer = TapGestureRecognizer();
var _textColor = Colors.yellow;
@override
void initState() {
super.initState();
_tapGestureRecognizer..onTapDown = (v) {
setState(() {
_textColor = Colors.red;
});
};
_tapGestureRecognizer..onTapUp = (v) {
setState(() {
_textColor = Colors.yellow;
});
};
}
@override
Widget build(BuildContext context) {
return Center(
child: Text.rich(
TextSpan(children: <InlineSpan>[
TextSpan(
text: '你好,Flutter实战入门',
style: TextStyle(color: _textColor,fontSize: 20),
recognizer: _tapGestureRecognizer,
)
])
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
_tapGestureRecognizer.dispose();
}
}
三、原始指针
Pointer是原始指针事件,GestureDetector和GestureRecognizer都是直接或者间接封装Poniters而实现的。Pointer通过控件Listener监听指针事件,Listener的指针类型如下:

当指针滑动的时候调用顺序:onPointerDown->onPointerMove->…->onPointerMove->onPointerUp
Listener控件是最原始的指针控件,一般情况下使用GestureDetector。当按下指针时,系统对应用程序执行“hit test”(命中测试),确定当前点击的位置包含哪些控件,然后系统将事件分发给检测到的控件树的最末尾节点,事件将从此节点开始向上传递,一直到根节点。
body: Listener(
onPointerDown: (v)=>print('onPointerDown'),
onPointerMove: (v)=>print('onPointerMove'),
onPointerUp: (v)=>print('onPointerUp'),
onPointerCancel: (v)=>print('onPointerCancel'),
child: Center(
child: Container(
width: 300,
height: 300,
color: Colors.green,
),
),
),
更多推荐



所有评论(0)