Flutter 手势识别

封面图 • 2025-11-05 • Flutter

在 Flutter 中，手势识别是通过 `GestureDetector` 和 `GestureRecognizer` 类来实现的。Flutter 提供了多种内置的手势识别器，如点击、长按、拖动、缩放等。

---

## ✅ 一、基本手势识别（使用 `GestureDetector`）

### 1. **点击（Tap）**

```dart
GestureDetector(
  onTap: () {
    print("点击事件");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)
```

### 2. **长按（Long Press）**

```dart
GestureDetector(
  onLongPress: () {
    print("长按事件");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
  ),
)
```

### 3. **拖动（Drag）**

```dart
GestureDetector(
  onPanUpdate: (details) {
    print("拖动中：${details.localPosition}");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)
```

### 4. **双击（Double Tap）**

```dart
GestureDetector(
  onDoubleTap: () {
    print("双击事件");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.yellow,
  ),
)
```

---

## ✅ 二、高级手势识别（使用 `GestureRecognizer`）

如果你需要自定义手势识别逻辑，可以使用 `GestureRecognizer` 的子类，比如：

- `TapGestureRecognizer`
- `LongPressGestureRecognizer`
- `VerticalDragGestureRecognizer`
- `HorizontalDragGestureRecognizer`
- `ScaleGestureRecognizer`（用于缩放）
- `PanGestureRecognizer`（用于拖动）

### 示例：自定义手势识别

```dart
class MyGestureRecognizer extends GestureRecognizer {
  @override
  void addPointer(PointerEvent event) {
    // 处理手势开始
  }

@override
  void handleEvent(PointerEvent event) {
    // 处理每个事件
  }

@override
  void didStopTrackingLastPointer() {
    // 手势结束
  }
}
```

然后将它绑定到一个 `GestureDetector`：

```dart
GestureDetector(
  behavior: HitTestBehavior.opaque,
  onPointerDown: (details) {
    final gesture = MyGestureRecognizer();
    gesture.addPointer(details);
  },
  child: Container(...),
)
```

> ⚠️ 注意：直接使用 `GestureRecognizer` 需要处理大量底层逻辑，一般推荐使用 `GestureDetector` 提供的封装好的方法。

---

## ✅ 三、多手势识别（例如同时支持点击和拖动）

你可以同时使用多个手势监听器：

```dart
GestureDetector(
  onTap: () => print("点击"),
  onPanStart: (details) => print("开始拖动"),
  onPanUpdate: (details) => print("拖动中"),
  onPanEnd: (details) => print("结束拖动"),
  child: Container(...),
)
```

---

## ✅ 四、手势冲突处理

当多个手势共存时，可能会有冲突。可以通过以下方式控制：

- 使用 `behavior: HitTestBehavior.opaque` 来控制是否拦截事件。
- 使用 `onTap` 和 `onPanStart` 等方法区分不同手势。

---

## ✅ 五、常见手势列表

| 手势类型 | 方法名 | 说明 |
|----------|--------|------|
| 点击 | `onTap` | 单次点击 |
| 双击 | `onDoubleTap` | 双击 |
| 长按 | `onLongPress` | 长按 |
| 拖动 | `onPanStart`, `onPanUpdate`, `onPanEnd` | 拖动操作 |
| 缩放 | `onScaleStart`, `onScaleUpdate`, `onScaleEnd` | 缩放操作 |
| 滑动 | `onHorizontalDragStart`, `onHorizontalDragUpdate`, `onHorizontalDragEnd` | 水平滑动 |

---

## ✅ 六、示例：拖动并缩放

```dart
Transform.scale(
  scale: _scale,
  child: GestureDetector(
    onScaleStart: (details) {
      _scale = 1.0;
    },
    onScaleUpdate: (details) {
      setState(() {
        _scale *= details.scale;
      });
    },
    child: Container(
      width: 200,
      height: 200,
      color: Colors.purple,
    ),
  ),
)
```

---

## ✅ 七、总结

| 手势类型 | 推荐组件 | 说明 |
|----------|----------|------|
| 简单点击 | `GestureDetector` | 最常用 |
| 拖动/缩放 | `GestureDetector` + `Transform` | 常用于画板、地图等 |
| 自定义手势 | `GestureRecognizer` | 高级用法，适合复杂交互 |

---

如果你有具体的场景（比如拖动图片、手势绘画、手势切换页面等），我可以帮你写出更详细的代码示例 😊