Flutter中的GestureDetector事件点击范围问题

最新推荐文章于 2024-04-20 10:13:13 发布

Xiaowanzi1998

最新推荐文章于 2024-04-20 10:13:13 发布

阅读量1.9k

点赞数

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/Xiaowanzi1998/article/details/125276651

版权

flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

GestureDetector增大点击事件范围

（1）方法1：

把GestureDetector手势放在要点击的盒子的最外层。

// 搜索框
GestureDetector(
  // 点击事件
  onTap: () {
    MyRouteDelegate.of(context).push('search/jobHistory');
  },
  child: Container(
    margin: EdgeInsets.fromLTRB(12.0.w, 9.0.w, 12.0.w, 9.0.w),
    decoration: BoxDecoration(
      color: Color(0xFFF5F5F5),
      borderRadius: BorderRadius.circular(16.0.w),
    ),
    child: SizedBox(
      width: double.infinity,
      height: 32.0.w,
      child: Align(
        alignment: Alignment.center,
        child: Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          direction: Axis.horizontal,
          children: [
            Image.asset(
              'assets/imagesarch.png',
              width: 13.w,
              height: 13.w,
            ),
            Container(
                margin: EdgeInsets.only(left: 8.0.w),
                child: Text('输入职位或者客户名称')),
          ],
        ),
      ),
    ),
  ),
),

（2）方法2：

点击事件范围只在文字上面起作用，但是GestureDetector明明包裹了Container。有问题的的代码：

Expanded(
    child: GestureDetector(
        onTap: () {
            if (widget.cancelClicklistener != null) {
                widget.cancelClicklistener();
            }
            Navigator.of(context).pop();
        },
        child: Container(
            height: 50.h,
            alignment: Alignment.center,
            child: Text('取消', style: TextStyle(color: Colors.grey, fontSize: FontSizeStyle.big),),
        ),
    )
),

解决：

Expanded(
    child: GestureDetector(
        onTap: () {
            if (widget.cancelClicklistener != null) {
                widget.cancelClicklistener();
            }
            Navigator.of(context).pop();
        },
        child: Container(
            height: 50.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0)),
                color: Colors.white,
            ),
            child: Text('取消', style: TextStyle(color: Colors.grey, fontSize: FontSizeStyle.big),),
        ),
    ))

（3）方法3：

给GestureDetector设置behavior属性：behavior: HitTestBehavior.translucent 或者 behavior: HitTestBehavior.opaque

GestureDetector(
	behavior: HitTestBehavior.opaque,
	onTap: () {
	  // 返回到上上级
	  Navigator.of(context)..pop(null);
	},
	child: Container(
	  padding: EdgeInsets.symmetric(horizontal: 16.w),
	  child: Text("取消",
	      style: TextStyle(fontSize: 13.sp, color: Color(0xFF333333))),
	),
),

【拓展】：
behavior的HitTestBehavior 值有三个：HitTestBehavior.opaque、 HitTestBehavior.deferToChild、HitTestBehavior.translucent