flutter 增大GestureDetector点击范围

5,531 阅读1分钟

GestureDetector的ontap点击事件,一般是以child的大小作为点击区域,有时候为了增大点击区域会给child设置padding,但是设置完点击padding部分仍然不会有点击效果,这时候需要配置一下

第一种、设置Container的背景色

   return GestureDetector(
    onTap: (){

    },
    child: Container(
      height: 50,
      width: 100,
      padding: EdgeInsets.symmetric(horizontal: 25),
      ///这里设置颜色
      color: Colors.transparent,
    ),
  );
  

第二种、GestureDetector设置behavior: HitTestBehavior.translucent

   return GestureDetector(
    ///这里设置behavior
    behavior: HitTestBehavior.translucent,
    onTap: (){

    },
    child: Container(
      height: 50,
      width: 100,
      padding: EdgeInsets.symmetric(horizontal: 25),
    ),
  );
  

这里behavior有三个属性

HitTestBehavior.opaque 和HitTestBehavior.translucent相同点在于都可以扩大点击范围,让自身整个区域都响应点击事件
HitTestBehavior.opaque 和HitTestBehavior.translucent不同点在于opaque会阻挡下一层元素获得事件,而translucent不会
因为opaque会修改hitTestSelf的返回值,让自己通过测试进而让父类结束对其它子类的碰撞测试
HitTestBehavior.translucent的穿透是有条件的,只能在"空白区域"穿透。这里的空白区域是指点击的区域没有child可以通过碰撞测试