在小部件后面传播点击

如何解决在小部件后面传播点击

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

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

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

编辑：此外，第一个 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,color: Colors.deepOrange,),/// 1. I'm Trying to clic here...
              GestureDetector(
                behavior: HitTestBehavior.translucent,onTap: null,child: Container(
                  height: 300,color: Colors.deepPurple,],// ),);
  }
}

解决方法

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

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,                  color: Colors.deepPurple,            ],          ),        ),      ),    );
  }
}

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

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,color: Colors.deepOrange,),/// Able to tap bottom
              IgnorePointer(
                ignoring: true,child: Container(
                  height: 300,color: Colors.deepPurple,],);
  }
}