基于Flutter GestureDetector实现指定条件滑动触发操作的问询

在Flutter里，我们可以借助GestureDetector组件监听触摸事件，通过计算触摸坐标的变化，轻松实现你需要的两种滑动判断逻辑，下面是具体实现：

1. 基础变量准备 #

首先在State类中定义两个变量，用来记录滑动的起点和终点坐标：

Offset? _startTouch;
Offset? _endTouch;

2. 第一种逻辑：指定起始点与终点范围判断 #

通过对比滑动的起点和终点所在的区域，判断是否触发动作。比如要求起点在屏幕上半部分，终点在下半部分：

GestureDetector(
  // 记录滑动起点
  onPanStart: (details) => _startTouch = details.globalPosition,
  // 滑动结束时判断
  onPanEnd: (details) {
    _endTouch = details.globalPosition;
    if (_startTouch != null && _endTouch != null) {
      final screenHeight = MediaQuery.of(context).size.height;
      // 判断起点在上半屏，终点在下半屏
      final isTopToBottom = _startTouch!.dy < screenHeight / 2 && _endTouch!.dy > screenHeight / 2;
      if (isTopToBottom) {
        // 触发你的自定义动作，比如刷新页面
        setState(() { /* 执行刷新逻辑 */ });
      }
    }
  },
  child: const SizedBox.expand(child: Center(child: Text('滑动测试区域'))),
)

3. 第二种逻辑：基于滑动角度与长度判断 #

先封装两个工具函数，分别计算滑动的角度和距离：

// 计算滑动角度（返回值为角度，范围-180°到180°）
double _getSwipeAngle(Offset start, Offset end) {
  final dx = end.dx - start.dx;
  final dy = end.dy - start.dy;
  return (atan2(dy, dx) * 180) / pi;
}

// 计算滑动的直线距离
double _getSwipeDistance(Offset start, Offset end) {
  return sqrt(pow(end.dx - start.dx, 2) + pow(end.dy - start.dy, 2));
}

然后在滑动结束的回调里，结合角度和距离的条件判断：

onPanEnd: (details) {
  _endTouch = details.globalPosition;
  if (_startTouch != null && _endTouch != null) {
    final angle = _getSwipeAngle(_startTouch!, _endTouch!);
    final distance = _getSwipeDistance(_startTouch!, _endTouch!);
    
    // 示例：判断滑动角度在0°±30°（水平向右），且滑动距离大于200px
    final isValidHorizontalSwipe = angle > -30 && angle < 30 && distance > 200;
    if (isValidHorizontalSwipe) {
      // 触发动作，比如打开侧边栏
      Scaffold.of(context).openDrawer();
    }
  }
}

4. 两种逻辑结合使用 #

你可以在同一个onPanEnd回调里同时判断两种逻辑，根据不同条件触发不同动作：

onPanEnd: (details) {
  _endTouch = details.globalPosition;
  if (_startTouch != null && _endTouch != null) {
    // 第一种逻辑：起点左半屏，终点右半屏
    final screenWidth = MediaQuery.of(context).size.width;
    final isLeftToRight = _startTouch!.dx < screenWidth / 2 && _endTouch!.dx > screenWidth / 2;
    
    // 第二种逻辑：角度在90°±30°（垂直向下），距离小于150px
    final angle = _getSwipeAngle(_startTouch!, _endTouch!);
    final distance = _getSwipeDistance(_startTouch!, _endTouch!);
    final isValidShortVerticalSwipe = angle > 60 && angle < 120 && distance < 150;

    if (isLeftToRight) {
      // 动作1：跳转到下一页
      Navigator.push(context, MaterialPageRoute(builder: (_) => const NextScreen()));
    } else if (isValidShortVerticalSwipe) {
      // 动作2：显示底部弹窗
      showModalBottomSheet(context: context, builder: (_) => const BottomSheetContent());
    }
  }
}

关键注意点 #

• 坐标选择：globalPosition是相对于屏幕的全局坐标，localPosition是相对于当前Widget的坐标，根据你的布局需求选择
• 实时跟踪：如果需要在滑动过程中实时判断，可使用onPanUpdate回调替代onPanEnd
• 变量清理：在State的dispose方法中可以将_startTouch和_endTouch置为null，避免不必要的内存占用

内容的提问来源于stack exchange，提问作者abuallrub