在小部件后面传播点击

Question

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

我正在使用HitTestBehavior.translucent ，但它只有在GestureDetector没有任何孩子的情况下才有效。

这是我在我的应用程序中需要的简化版本。 我有一个堆栈，其中包含屏幕上的许多小卡片，并且在它们之上还有一个 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

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

​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

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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}