在堆栈内的重叠小部件中使用手势检测器

Question

我试图将两个重叠的小部件放在

Stack

中，并用不同的

GestureDetector

小部件包装这些小部件。我的目标是在点击重叠区域时在两个

GestureDetector

中接收点击事件。我尝试使用不同的选项调整

behavior

属性，但似乎都不起作用。使用我当前位于重叠区域的代码，我只能从第二个元素获取点击事件。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: OverlappingStack(),
        ),
      ),
    );
  }
}

class OverlappingStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            print('First element tapped');
          },
          child: Container(
            width: 100,
            height: 200,
            color: Colors.red.withOpacity(0.5),
          ),
        ),
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            print('Second element tapped');
          },
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
      ],
    );
  }
}

如何让两个

GestureDetector

都接收到重叠区域中的点击事件？

Answer 1

Flutter 手势系统被设计为仅允许当时识别指针。这意味着只有一个 GestureDetector 会收到点击事件。

但是有一个解决方法，您可以只使用该位置，然后基于该位置触发事件：

class OverlappingStack extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTapDown: (TapDownDetails details) {
            final RenderBox box = context.findRenderObject() as RenderBox;
            final Offset localOffset = box.globalToLocal(details.globalPosition);
    
            if (localOffset.dx <= 100 && localOffset.dy <= 200) {
              print('First element tapped');
            }
            if (localOffset.dx <= 200 && localOffset.dy <= 100) {
              print('Second element tapped');
            }
          },
          child: Stack(
            children: [
              Container(
                width: 100,
                height: 200,
                color: Colors.red.withOpacity(0.5),
              ),
              Container(
                width: 200,
                height: 100,
                color: Colors.blue.withOpacity(0.5),
              ),
            ],
          ),
        );
      }
    }

消息来源也提到了这个问题：

https://github.com/flutter/flutter/issues/87774

https://github.com/flutter/flutter/issues/75099