Flutter 如何让 GestureDetector 捕获堆栈内的点击

发布于11月22日

我试图让GestureDetector在Stack中工作，并在其上面放置一个Container，但从未调用ONTAP回调.

正如你所看到的，它甚至对HitTestBehavior.translucent也不起作用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {
                print('tap');
              },
              child: Container(color: Colors.blue),
            ),
            Container(color: Colors.white),
          ],
        ),
      ),
    );
  }

我知道我想要捕获另一个Widget下面的点击事件可能会很奇怪，但在我的实际情况中，上面的Widget是透明的，有时会有渐变.

推荐答案

用IgnorePointer就可以解决这个问题.

您可以用IgnorePointer将顶部小部件(在本例中为白色Container)括起来.

Stack(
  children:[
    (...your down widget which should handle the tap...)

    IgnorePointer(
      child: (... your top widget which must be transparent to any tap ...)
    )
  ]
)

然后，顶部的小部件对手势事件变得透明.活动将由Stack强中排名最靠前的DeDeDector(如果有的话)捕捉.

例如，您可能只需对代码稍作更改即可获得所需的结果，如下所示:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {
                print('tap');
              },
              child: Container(color: Colors.blue),
            ),
            IgnorePointer(ignoring:true,child:Container(color: Colors.white)),
          ],
        ),
      ),
    );
  }