Flutter随手记：GestureDetector实现点击事件时，点击空白区域不能响应？

刺骨的言语ヽ痛彻心扉 2023-01-10 11:50 427阅读 0赞

![cf750a91c816f05f4e7939d1d73eb424.png][]

作为一个Flutter小白，需要写点随手笔记，来增加熟练度。

#### 正题 ####

--------------------

上面的这个问题是当 GestureDetector 中添加了 Container组件，Container组件里面的图片并没完全占满所有的空间，这时候点击空白区域，事件不能响应。

GestureDetector(
              child: Container(
                width: ThemeSize.NavigationHeight,
                height: ThemeSize.NavigationHeight,
                child: Center(
                  child: Image.asset(
                    ImagePath.commonPath + "common_return_icon.png",
                    fit: BoxFit.fitWidth,
                    width: 10,
                    height: 32,
                  ),
                ),
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),

正解是 GestureDetector 的 **behavior** 需要设置。可设置的值是一个枚举一共有三个值，根据情况，我使用的是 \**opaque*。具体如下所示。

![2bec0f84c98444b5404fb1f68443ac62.png][]

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><strong>deferToChild</strong></td> 
   <td align="left">只有当前容器中的child被点击时才会响应点击事件。</td> 
  </tr> 
  <tr> 
   <td align="left"><strong>opaque</strong></td> 
   <td align="left">点击整个区域都会响应点击事件，但是点击事件不可穿透向下传递，注释翻译：阻止视觉上位于其后方的目标接收事件。</td> 
  </tr> 
  <tr> 
   <td align="left"><strong>translucent</strong></td> 
   <td align="left">同样是点击整个区域都会响应点击事件，和opaque的区别是点击事件是否可以向下传递，注释翻译：半透明目标既可以在其范围内接受事件，也可以允许视觉上位于其后方的目标接收事件。</td> 
  </tr> 
 </tbody> 
</table>

\[参考博客\](http://www.luyixian.cn/news\_show\_409941.aspx)

![1cc773b3510614b54c92ffc3dc40d24a.gif][]

[cf750a91c816f05f4e7939d1d73eb424.png]: /images/20221119/d8dad73ea5d14c34bf81e997592aa57c.png
[2bec0f84c98444b5404fb1f68443ac62.png]: /images/20221119/3f46f55245cc465aa4cbfd0e935d555f.png
[1cc773b3510614b54c92ffc3dc40d24a.gif]: /images/20221119/83bdf648ce13439a9912c9b97d22cb66.png