Unity: UIWidgets 简明教程

长按监听

注意事项：
本教程部分项目参考了 UIWidgets 官方开发样例。
官方样例只有源代码和完整的项目，没有具体的构建步骤和开发过程中遇到的问题的讲解。本教程即在官方样例的基础上做了一定的修改，并辅以要点的讲解，一步一步地构建项目，比较符合初学者学习的思路和习惯。目前教程持续更新中。

在移动端需要监听多种多样的手势操作，不仅仅局限于点击，手势操作还包括短时间内多次点击、长按、多点触控、滑动等等。本节着眼于实现对“长按”事件的监听。

配置好 UIWidgets 开发环境，新建脚本文件 LongPressTest.cs，输入以下代码：

using Unity.UIWidgets.material;
using Unity.UIWidgets.widgets;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.animation;
using UnityEngine;

namespace UIWIdgetsTutorial
{
	public class LongPressTest : UIWidgetsPanel
	{
		protected PageRouteFactory pageRouteBuilder {
			get {
				return (RouteSettings settings, WidgetBuilder builder) =>
					new PageRouteBuilder(
						settings: settings,
						pageBuilder: (BuildContext context, Animation<float> animation,
							Animation<float> secondaryAnimation) => builder(context)
					);
			}
		}

		protected override Widget createWidget()
		{
			return new WidgetsApp(
				home: new LongPressWidget(),
				pageRouteBuilder: this.pageRouteBuilder
			);
		}
	}

	class LongPressWidget : StatefulWidget
	{
		public override State createState()
		{
			return new LongPressWidgetState();
		}
	}

	class LongPressWidgetState : State<LongPressWidget>
	{
		public override Widget build(BuildContext context)
		{
			// GestureDetector 包含了多个有关手势识别的属性，如这里的“长按”手势等。
			// 通过设置这些属性即可设置各种手势的监听器、回调函数等，非常的方便，并且结构很清晰。
			// 运行可以知道这些回调函数的调用顺序为：
			// 1. Long Press（也即 onLongPress 事件）
			// 2. Long Press Drag Start（也即 onLongPressStart 事件）
			// 3. Long Press Drag  Update（如果发生拖动事件，即长按并移动手指或触摸笔等）（也即 onLongPressMoveUpdate 事件）
			// 4. Long Press Up（也即 onLongPressUp 事件）
			// 5. Long Press Drag Up（也即 onLongPressEnd 事件）
			// 或者表述如下：
			// onLongPress -> onLongPressStart -> onLongPressMoveUpdate -> onLongPressUp -> onLongPressEnd
			return new GestureDetector(
				onLongPressStart: (value) => { Debug.Log($"Long Press Drag Start: {value}"); },
				onLongPressMoveUpdate: (value) => { Debug.Log($"Long Press Drag Update: {value}"); },
				onLongPressEnd: (value) => { Debug.Log($"Long Press Drag Up: {value}"); },
				onLongPressUp: () => { Debug.Log($"Long Press Up"); },
				onLongPress: () => { Debug.Log($"Long Press"); },
				child: new Center(
					child: new Container(
						width: 200,
						height: 200,
						color: Colors.blue
					)
				)
			);
		}
	}
}

这里需要特别注意的是最后的 GestureDetector 的各项属性的设置，通过设置这些属性即可指定各种事件对应的回调函数。对应于“长按”事件，有 onLongPressStart、onLongPressMoveUpdate、onLongPressEnd、onLongPressUp 和 onLongPress 等属性，注释中给出了一些简短的说明。

效果

可以清晰地看到各种事件触发的先后顺序。