时间戳

首页 > 解决方案 > 在小部件后面传播点击

flutter - 在小部件后面传播点击

问题描述

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

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

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

编辑：另外，第一个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,
                ),
              ),
            ],
          ),
        ),
        // ),
      ),
    );
  }
}

标签： flutterdartcanvasgesturedetectorpropagation

解决方案

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

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

也很抱歉在这里发迟了。

推荐阅读