如何让Stack中重叠Widget的GestureDetector均响应点击事件？

Flutter默认的手势事件传递机制里，Stack上层的Widget会优先消费点击事件，所以重叠区域点击时只有上层的GestureDetector会触发。要让两个都响应，有以下几种可行方案：

方案一：手动触发下层回调 #

把两个点击逻辑提取出来，在上层的点击回调中同时调用自身和下层的方法，简单直接：

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 {
  void _firstTap() {
    print('First element tapped');
  }

  void _secondTap() {
    print('Second element tapped');
    _firstTap(); // 手动调用第一个元素的点击逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: _firstTap,
          child: Container(
            width: 100,
            height: 200,
            color: Colors.red.withOpacity(0.5),
          ),
        ),
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: _secondTap,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
      ],
    );
  }
}

方案二：用Listener替代上层GestureDetector #

Listener不会消费指针事件，只会监听事件并继续传递，适合只需要基础指针动作响应的场景：

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),
          ),
        ),
        Listener(
          behavior: HitTestBehavior.translucent,
          onPointerUp: (event) {
            print('Second element tapped');
          },
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
      ],
    );
  }
}

注意：Listener处理的是底层指针事件，和GestureDetector的手势识别逻辑不同，如果需要双击、长按等复杂手势，这个方案不适用。

方案三：自定义不拦截事件的GestureRecognizer #

通过RawGestureDetector使用自定义的手势识别器，让上层手势不拦截事件，传递给下层：

import 'package:flutter/gestures.dart';
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 NonBlockingTapRecognizer extends TapGestureRecognizer {
  @override
  void acceptGesture(int pointer) {
    super.acceptGesture(pointer);
    // 将自己标记为未处理事件，让下层识别器也能接收
    resolve(GestureDisposition.rejected);
  }
}

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),
          ),
        ),
        RawGestureDetector(
          gestures: {
            NonBlockingTapRecognizer: GestureRecognizerFactoryWithHandlers<NonBlockingTapRecognizer>(
              () => NonBlockingTapRecognizer(),
              (recognizer) {
                recognizer.onTap = () {
                  print('Second element tapped');
                };
              },
            ),
          },
          behavior: HitTestBehavior.translucent,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
      ],
    );
  }
}

这个方案支持完整的手势识别逻辑，适合需要复杂手势的场景。

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