Flutter如何检测手指触摸屏幕时滑入容器并触发交互？

要实现触摸滑动时手指下方容器放大的效果，你可以用Listener组件监听指针进入/离开容器的事件，替代仅依赖GestureDetector的点击事件。Listener能精准捕捉触摸点在容器间滑动时的进入动作，具体实现如下：

核心思路 #

利用Listener的onPointerEnter（触摸点进入容器区域时触发）和onPointerExit（触摸点离开时触发）事件，结合状态管理切换容器的大小状态，再通过AnimatedContainer实现平滑的尺寸过渡。

代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

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

  @override
  State<SlideToEnlargeScreen> createState() => _SlideToEnlargeScreenState();
}

class _SlideToEnlargeScreenState extends State<SlideToEnlargeScreen> {
  // 记录当前被触摸选中的容器索引
  int? _selectedIndex;
  // 模拟容器数据
  final List<String> _items = List.generate(8, (index) => "容器$index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("滑动放大容器")),
      body: Center(
        child: GestureDetector(
          // 手指离开屏幕时重置选中状态
          onPointerUp: (event) {
            setState(() {
              _selectedIndex = null;
            });
          },
          child: SizedBox(
            height: 140,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: _items.length,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              itemBuilder: (context, index) {
                return Listener(
                  // 触摸点进入容器时触发
                  onPointerEnter: (event) {
                    // 仅响应触摸事件，排除鼠标等其他指针
                    if (event.kind == PointerDeviceKind.touch) {
                      setState(() {
                        _selectedIndex = index;
                      });
                    }
                  },
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 150),
                    width: _selectedIndex == index ? 120 : 80,
                    height: _selectedIndex == index ? 120 : 80,
                    margin: const EdgeInsets.symmetric(horizontal: 8),
                    decoration: BoxDecoration(
                      color: Colors.blue.shade300,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      _items[index],
                      style: const TextStyle(color: Colors.white, fontSize: 16),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

关键说明 #

1. Listener的作用：不同于GestureDetector的点击事件，Listener能直接监听底层指针事件，当触摸点滑动进入容器边界时，onPointerEnter会立即触发，完美匹配滑动检测需求。
2. 触摸事件过滤：通过event.kind == PointerDeviceKind.touch判断，确保只响应手指触摸动作，避免鼠标指针的误触发。
3. 平滑过渡：使用AnimatedContainer替代普通Container，自动处理尺寸变化的动画过渡，提升交互体验。
4. 重置状态：在父组件的GestureDetector中监听onPointerUp事件，当手指离开屏幕时重置选中状态，符合常规交互逻辑。

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