flutter用GestureDetector实现点击事件时，空白区域点击无效

最新推荐文章于 2024-05-13 22:39:34 发布
最新推荐文章于 2024-05-13 22:39:34 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaoqiaoxiaoqiao/article/details/106529344
版权

今天遇到一个问题，自定义列表的行，点击事件用GestureDetector包裹的Container，加了一些其他的控件，但是当我点击条目时，发现只有点击文字或者图片的区域才能响应点击事件，其他区域捕捉不到onTap。

查了一下发现GestureDetector有个behavior属性，点进去，看一下，包括这三种模式

翻译一下就是：

当behavior选择deferToChild时，只有当前容器中的child被点击时才会响应点击事件；

当behavior选择opaque时，点击整个区域都会响应点击事件，但是点击事件不可穿透向下传递，注释翻译：阻止视觉上位于其后方的目标接收事件，所以我需要的这种效果直接将behavior设置为HitTestBehavior.opaque就可以了；

当behavior选择translucent时，同样是点击整个区域都会响应点击事件，和opaque的区别是点击事件是否可以向下传递，注释翻译：半透明目标既可以在其范围内接受事件，也可以允许视觉上位于其后方的目标接收事件。

简单来说这就是三种模式的区别了，具体使用场景还需要继续探索啦~

大猫～
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入了解Flutter中的GestureDetector小部件：点击事件处理
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
10-12 403
Flutter是一款流行的跨平台移动应用开发框架，允许开发人员创建高度交互性的应用程序。其中，GestureDetector小部件是处理用户手势操作的利器之一。本文将带您深入探讨如何使用GestureDetector来处理点击事件，提供实际示例和最佳实践，帮助您在Flutter应用程序中实现互动性。无论您是新手还是有经验的开发人员，都将从本文中学到有关处理点击事件的重要知识。让我们开始吧！
flutter 使用GestureDetector点击没有反应
大灰狼的小绵羊哥哥的博客
11-25 1531
正常使用是 GestureDetector( onTap: () { }, child: Text("demo"), ), 但有时候点击之后没有反应，原因：点击部分处于空白区域，没有接收到点击事件； deferToChild 只有当前容器中的child被点击时才会响应点击事件。 opaque 点击整个区域都会响应点击事件，但是点击事件不可穿透向下传递，注释翻译：阻止视觉上位于其后方的目标接收事件。 translucent 同样是点击整个..
Flutter 中的 GestureDetector 小部件：全面指南
最新发布
smileKH的博客
05-13 517
下面是一个使用// 按钮点击事件},),),),),是 Flutter 中处理手势交互的核心小部件，它提供了丰富的手势处理选项，使得在 Flutter 应用中实现各种交互手势变得简单而高效。掌握的使用，可以帮助你创建出既美观又交互性强的用户界面。
flutter GestureDetector 点击空白区域无反应解决办法
Dream It Possible
08-29 3120
当behavior选择opaque时，点击整个区域都会响应点击事件，但是点击事件不可穿透向下传递，注释翻译：阻止视觉上位于其后方的目标接收事件，所以我需要的这种效果直接将behavior设置为HitTestBehavior.opaque就可以了；当behavior选择translucent时，同样是点击整个区域都会响应点击事件，和opaque的区别是点击事件是否可以向下传递，注释翻译：半透明目标既可以在其范围内接受事件，也可以允许视觉上位于其后方的目标接收事件。...
Flutter GestureDetector点击不响应onTap事件问题
qq_23404533的博客
03-31 960
GestureDetector子部件为Container，给它设置了Padding属性，Container内部又有Text文本小部件，当不给Container设置Color背景色时点击被Padding的空白区域不会响应onTap事件，只有点击Text文本区域会响应。 解决办法： 给Container添加背景色，不然GestureDetector-》onTap点击Text文本空白区域时不响应事件
flutter GestureDetector 空白事件不响应
曾经也是个少年
07-30 231
behavior: HitTestBehavior.opaque
Flutter 中 GestureDetector 的使用误区
创业项目
06-09 1056
在实际开发中，我们通常需要实现某个组件的更多点击事件。比如：原生的RaisedButton组件是无法响应诸如拖拽或是按下、抬起等细化的动作，它只有一个onPressed()方法来表示。当我们想实现这些细化事件时，通常使用的组件是GestureDetector。 我们先来看下面这段代码： GestureDetector( onTap: () { debugPrint("RaisedButton点击阻断"); }, child: RaisedButton( c
flutter实现点击事件
09-07
在Flutter中，实现点击事件是构建交互式用户界面的关键步骤。这里我们将深入探讨两种主要的方法，以及如何使用`GestureDetector`监听多种手势。 首先，对于那些支持事件监听的Widget，如`RaisedButton`，你可以直接...
Flutter 全局点击空白处隐藏键盘实战
09-07
当用户点击空白区域时，使用 `FocusScopeNode` 和 `FocusManager` 来查找并移除当前聚焦的 `TextField`。以下是全局监听的代码实现： ```dart class MyApp extends StatelessWidget { @override Widget build...
flutter InkWell实现水波纹点击效果
08-25
Flutter InkWell 实现水波纹点击效果 Flutter 中的 InkWell 是一个...InkWell 是一个非常实用的组件，在 Flutter 中它可以实现水波纹点击效果，并且可以与 Material、Ink 等组件一起使用，以实现更多的点击事件效果。
flutter 的Button按钮组件点击不好使？
Android_Mr_Zhao的博客
11-11 972
可能是这样的骚年！ 错误写法： child: FlatButton( onPressed: () => (){ Toast.show(context, "忘记密码"); }, padding: EdgeInsets.only(right: 0.0), child: Text( '忘记密码？', style: TextStyles.kLabelStyle, ),
【解决方案】ERROR: lib/bridge_generated.dart:837:9: Error: The parameter ‘ptr‘ of the method ‘FlutterRustB
每天进步一点点
07-28 761
代码】【解决方案】ERRORlib/bridge_generated.dart8379ErrorTheparameter'ptr'ofthemethod'FlutterRustB。
FlutterFlutter原理 HitTestBehavior 介绍
yangbinbingA的博客
03-28 746
FlutterFlutter原理 HitTestBehavior 介绍
【Flutter】HitTestBehavior想点哪里点哪里
m0_59162559的博客
06-20 522
点击组件中的`HitTestBehavior`属性支持三个值：`opaque`、`translucent`、`deferToChild`。其在命中测试起到一定作用可改变原有命中逻辑从而是实现不同点击触发事件。
Flutter : 关于 HitTestBehavior
J.D.的博客
05-26 3845
HitTestBehavior 在 Container 上的一些应用。
Flutter中的手势竞技场：深入解析多个GestureDetector之间的交互
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
10-12 242
本文将深入探讨Flutter中手势检测和竞技场的核心概念，通过一个示例代码演示了多个GestureDetector之间的交互。我们将详细解释示例中的代码，了解手势竞技场的工作原理以及如何使用GestureDetector的behavior属性来控制事件分发行为。在Flutter应用程序中，理解手势竞技场对于正确处理用户交互至关重要。
Flutter GestureDetector手势事件点击没有反应的处理方法
dream_comer的博客
07-05 5145
Flutter GestureDetector手势事件点击没有反应欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowc...
Flutter中的GestureDetector事件点击范围问题
Xiaowanzi1998的博客
06-14 2038
解决flutter事件点击范围问题
flutter-使用GestureDetector识别手势事件
鹏多多的博客
12-28 2056
在 flutter 中，GestureDetector 是手势识别的组件，可以识别点击、双击、长按、拖动、缩放等手势事件，并且可以与子组件进行交互，构造函数属性如下
flutter 中 GestureDetector 点击事件怎么禁用
06-08
在 Flutter 中，可以通过将 GestureDetector 的 onTap 回调设置为 null 来禁用点击事件。示例如下： ```dart GestureDetector( onTap: null, // 禁用点击事件 child: Container( width: 100, height: 100, color: Colors.red, ), ); ``` 如果想要动态地禁用或启用点击事件，可以将 onTap 回调设置为一个函数，然后在需要禁用或启用点击事件的时候，将该函数设置为 null 或者恢复为原来的函数。例如： ```dart void _handleTap() { // 处理点击事件 } GestureDetector( onTap: _canTap ? _handleTap : null, // 根据 _canTap 状态决定是否禁用点击事件 child: Container( width: 100, height: 100, color: Colors.red, ), ); ``` 在上面的代码中，_canTap 是一个布尔值，表示当前是否可以响应点击事件。当 _canTap 为 true 时，点击事件将会触发 _handleTap 函数；当 _canTap 为 false 时，点击事件将被禁用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值