堆栈中 ListView 顶部的 GestureDetector 阻止滚动 - Flutter Web

Posted 2023-02-23

【中文标题】堆栈中 ListView 顶部的 GestureDetector 阻止滚动 - Flutter Web

【英文标题】：GestureDetector on top of a ListView in a Stack blocks the scroll - Flutter Web

【发布时间】：2021-10-18 16:04:35

【问题描述】：

我有一个堆栈，其中首先包含一个 ListView，然后是一个带有 GestureDetector 的透明小部件以单击它。一切正常，但是当我将鼠标放在 GestureDetector 内时，我无法再滚动 ListView，即使将 GestureDetector 的 behavior 属性设置为 HitTestBehavior.translucent。

我知道这是因为 GestureDetector 正在吸收它，可能是作为拖动事件，但我希望它只检测点击事件并让滚动事件“通过”。如何在 Flutter 中实现这种行为？

请注意，它仅在使用触控板滚动时发生（我猜是滚轮），但如果您使用拖放手势滚动列表，那么即使您的鼠标悬停在顶部小部件上，滚动也不会停止。

我已经制作了一个 DartPad，所以你可以通过这个链接自己测试它：https://dartpad.dev/8d68891da69d661a8129d5adc7727e4c

代码也贴在下面：

import 'package:flutter/material.dart';

void main() 
  runApp(
    MaterialApp(
      home: ***Example()
    ));


class ***Example extends StatelessWidget 
  Widget _buildListItem() 
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      height: 100,
      color: Colors.blue[100],
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: [
          ListView.builder(
            itemCount: 20,
            itemBuilder: (_, __) => _buildListItem(),
          ),
          Center(
            child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () => print('tap'),
              child: const Text(
                'Hover me and\ntry to scroll\nthe listview',
                style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  

【参考方案1】：

问题不在于 GestureDetector。实际上，Text 小部件是阻止 ListView 接收指针事件的部件。不过，您可以使用IgnorePointer 轻松修复它。

IgnorePointer

在命中测试期间不可见的小部件。

这将使 Text 小部件忽略指针事件并让 ListView 接收它们：

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print('tap'),
  child: IgnorePointer( // You insert it right here above the Text widget
    child: const Text(
      'Hover me and\ntry to scroll\nthe listview',
      style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
    ),
  ),
)