Flutter 双指缩放和双指移动共存手势检测系列之--1方案
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class MultiGestureDetectorPage extends StatefulWidget {
MultiGestureDetectorPage({Key key}) : super(key: key);
@override
_MultiGestureDetectorPageState createState() => _MultiGestureDetectorPageState();
}
class _MultiGestureDetectorPageState extends State<MultiGestureDetectorPage> {
String _info = "等待交互";
void _updateInfo(PointerEvent event) {
if (event is PointerDownEvent || event is PointerMoveEvent) {
setState(() {
_info = '${event.runtimeType}';
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("双指缩放和双指移动共存手势"),
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onScaleStart: (ScaleStartDetails details) {
_updateInfo(details);
},
onScaleUpdate: (ScaleUpdateDetails details) {
_updateInfo(details);
},
onScaleEnd: (ScaleEndDetails details) {
_updateInfo(details);
},
),
),
Positioned.fill(
child: Listener(
onPointerDown: (PointerDownEvent event) {
_updateInfo(event);
},
onPointerMove: (PointerMoveEvent event) {
_updateInfo(event);
},
onPointerUp: (PointerUpEvent event) {
_updateInfo(event);
},
),
),
Positioned(
left: 100,
top: 100,
child: Text(_info),
),
],
),
);
}
}
这段代码使用了Stack
和多个Positioned.fill
来覆盖整个屏幕,并在其上叠加了GestureDetector
和Listener
。GestureDetector
用于处理缩放手势,而Listener
用于处理其他指针事件。通过_updateInfo
函数,我们可以在不同的事件触发时更新文本信息,以便了解用户的交互行为。这个例子展示了如何同时处理多点触摸的缩放和其他类型的指针事件。
评论已关闭