在小部件后面传播点击

Question

我有一个 Stack，里面有两个小部件。我正在尝试检测对 Stack 底部小部件的点击，它位于顶部小部件的后面。

我正在使用 HitTestBehavior.translucent，但它仅在 GestureDetector 没有任何 child 时才有效。

这是我在我的应用程序中需要的简化版本。我有一个 Stack，它在屏幕上包含许多小卡片，并且在它们上面有一个 canvas。尽管 canvas，我需要能够点击卡片来更改其内容。我以为使用半透明行为可以解决我的问题，但事实并非如此。

编辑：另外，第一个 GestureDetector 将始终在 Positioned 小部件中。

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 800,
          width: 400,
          child: Stack(
            children: [
              /// 2. ... and trigger the onTap function of this widget
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  print('TAP BOTTOM');
                },
                child: Container(
                  height: 500,
                  width: 400,
                  color: Colors.deepOrange,
                ),
              ),
              /// 1. I'm Trying to clic here...
              GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: null,
                child: Container(
                  height: 300,
                  width: 400,
                  color: Colors.deepPurple,
                ),
              ),
            ],
          ),
        ),
        // ),
      ),
    );
  }
}

Answer 1

VrajGohil 就此问题给出了答案： https://github.com/flutter/flutter/issues/77596

这是他的解决方案：

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 800,
          width: 400,
          child: Stack(
            children: [
              /// 2. ... and trigger the onTap function of this widget (WIDGET_2)
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  print('TAP BOTTOM');
                },
                child: Container(
                  height: 500,
                  width: 400,
                  color: Colors.deepOrange,
                ),
              ),
              /// Able to tap bottom
              IgnorePointer(
                ignoring: true,
                child: Container(
                  height: 300,
                  width: 400,
                  color: Colors.deepPurple,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

我有一个示例代码，您可以使用它来实现：

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 800,
          width: 400,
          child: Stack(
            children: [
              /// 2. ... and trigger the onTap function of this widget (WIDGET_2)
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  print('TAP BOTTOM');
                },
                child: Container(
                  height: 500,
                  width: 400,
                  color: Colors.deepOrange,
                ),
              ),
              /// Able to tap bottom
              IgnorePointer(
                ignoring: true,
                child: Container(
                  height: 300,
                  width: 400,
                  color: Colors.deepPurple,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

也很抱歉在这里发帖晚了。

在小部件后面传播点击

Propagate click behind a widget

canvas

propagation

gesturedetector

dart

flutter