Flutter中如何判断滑动屏幕时手指是否进入或离开指定Widget

要实现手指滑动时判断是否进入/离开特定Widget，核心是获取目标Widget的渲染边界，结合全局触摸事件实时校验触摸点位置，对比状态变化返回结果。

实现步骤 #

1. 给目标Widget绑定GlobalKey，用于获取它的渲染对象和位置信息。
2. 用Listener包裹页面根组件，捕获全局触摸事件（包括滑动、按下、抬起）。
3. 在触摸回调中，将触摸点的全局坐标与目标Widget的全局边界矩形对比，判断是否在范围内。
4. 维护状态变量记录当前状态，当状态变化时触发返回true（进入）或false（离开）的逻辑。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TouchDetectionPage(),
    );
  }
}

class TouchDetectionPage extends StatefulWidget {
  const TouchDetectionPage({super.key});

  @override
  State<TouchDetectionPage> createState() => _TouchDetectionPageState();
}

class _TouchDetectionPageState extends State<TouchDetectionPage> {
  final GlobalKey _targetWidgetKey = GlobalKey();
  bool _isFingerInside = false;

  void _checkFingerPosition(Offset globalPos) {
    // 获取目标Widget的渲染对象
    final RenderBox? renderBox = _targetWidgetKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    // 计算目标Widget的全局边界矩形
    final Rect widgetGlobalRect = renderBox.localToGlobal(Offset.zero) & renderBox.size;
    final bool currentInside = widgetGlobalRect.contains(globalPos);

    // 状态变化时更新并返回结果
    if (currentInside != _isFingerInside) {
      setState(() {
        _isFingerInside = currentInside;
        // 这里可根据需求将结果返回给业务逻辑
        print(currentInside ? "进入Widget，返回true" : "离开Widget，返回false");
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      // 确保捕获所有触摸事件，不受子组件触摸拦截影响
      behavior: HitTestBehavior.opaque,
      onPointerMove: (PointerMoveEvent event) => _checkFingerPosition(event.position),
      onPointerDown: (PointerDownEvent event) => _checkFingerPosition(event.position),
      onPointerUp: (PointerUpEvent event) {
        if (_isFingerInside) {
          setState(() {
            _isFingerInside = false;
            print("离开Widget，返回false");
          });
        }
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("触摸区域检测")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _isFingerInside ? "手指在目标Widget内" : "手指不在目标Widget内",
                style: const TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 30),
              // 目标检测Widget
              Container(
                key: _targetWidgetKey,
                width: 250,
                height: 250,
                color: Colors.lightBlueAccent,
                alignment: Alignment.center,
                child: const Text("目标Widget"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 如果目标Widget是非矩形（比如圆形、自定义形状），可以使用RenderObject.hitTest方法进行更精确的命中检测，将全局坐标转换为Widget本地坐标后传入即可。
• 若页面存在滚动组件，需确保Listener的事件优先级高于滚动组件，避免触摸事件被拦截。
• 当目标Widget的位置或大小动态变化时，代码会在每次触摸时重新计算边界，无需额外处理。

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