手势从入门到放弃，Flutter手势如何高屋建瓴看世界？

2024-02-23 23:36:15

Flutter是一种广泛应用于跨平台App开发的现代化开发框架，其深受开发者欢迎的重要原因之一便是它对多点触控交互的支持。Flutter开发者只需处理手指事件，剩下的细节全部由框架本身完成，从而能够轻松实现丰富的手势交互。

Flutter支持各种常见的手势，包括点击、拖拽、滚动、缩放和旋转等，这些手势可以通过称为手势识别器的小部件来检测。使用手势识别器，开发者可以针对不同的手势自定义事件响应。在 Flutter 的体系中，对这些手势的处理与路由事件类似，均依赖于 BuildContext，这里用到了 Flutter 内部 GestureBinding 和 GestureArenaManager 两个关键类，通过两个类来完成全局手势管理，当手势处理器有冲突时，它们需要决定由谁最终处理该手势。

下文将详细讲解如何使用手势识别器来实现不同类型的手势处理。

手势识别器

Flutter框架为我们提供了多种手势识别器，通过这些识别器，我们可以轻松捕捉到用户的手势事件。

1. GestureDetector

最基本的也是最常用的手势识别器，它可以识别包括onTap、双击、长按、拖拽和缩放等在内的各种手势。

GestureDetector(
  onTap: () {
    // 点击事件处理逻辑
  },
  onDoubleTap: () {
    // 双击事件处理逻辑
  },
  onLongPress: () {
    // 长按事件处理逻辑
  },
  onPanDown: (DragDownDetails details) {
    // 拖拽开始事件处理逻辑
  },
  onPanUpdate: (DragUpdateDetails details) {
    // 拖拽过程事件处理逻辑
  },
  onPanEnd: (DragEndDetails details) {
    // 拖拽结束事件处理逻辑
  },
  onScaleStart: (ScaleStartDetails details) {
    // 缩放开始事件处理逻辑
  },
  onScaleUpdate: (ScaleUpdateDetails details) {
    // 缩放过程事件处理逻辑
  },
  onScaleEnd: (ScaleEndDetails details) {
    // 缩放结束事件处理逻辑
  },
)

2. Draggable

用于处理可拖拽组件的手势识别器。

Draggable(
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
  onDragStarted: () {
    // 拖拽开始事件处理逻辑
  },
  onDragUpdate: (DragUpdateDetails details) {
    // 拖拽过程事件处理逻辑
  },
  onDragEnd: (DragEndDetails details) {
    // 拖拽结束事件处理逻辑
  },
)

3. Scrollable

用于处理可滚动组件的手势识别器。

Scrollable(
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
  ),
  onScrollStart: () {
    // 滚动开始事件处理逻辑
  },
  onScrollUpdate: (ScrollUpdateDetails details) {
    // 滚动过程事件处理逻辑
  },
  onScrollEnd: (ScrollEndDetails details) {
    // 滚动结束事件处理逻辑
  },
)