flutter中的点击事件

最新推荐文章于 2024-08-19 18:49:49 发布
最新推荐文章于 2024-08-19 18:49:49 发布
阅读量3.3k 收藏 3
点赞数
分类专栏： flutter 文章标签： flutter点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36865892/article/details/101061821
版权
本文探讨了Flutter中点击事件的常见问题，包括点击水波纹效果的实现障碍，通过设置`InkWell`和`behavior`属性解决点击区域问题，以及如何处理点击事件默认触发导致的不可点击状态。提供了相应的代码示例和解决策略。
摘要由CSDN通过智能技术生成

点击水波纹效果

FlatButton;

FlatButton(
          //长按时颜色
          highlightColor:Colors.red,
          //点击的水波纹颜色
          splashColor: Colors.blue,
          onPressed: onPressed,
          child: Text(text,
              style: TextStyle(
                  fontSize:20,
                  fontWeight: FontWeight.w400)),
          shape: RoundedRectangleBorder(
            side: BorderSide(
                color:  Colors.black, style: BorderStyle.solid, width: 1),
          ),
        ))

InkWell:
这里有个问题，InkWell子布局添加颜色后点击就无法展示水波纹了，子布局将父布局覆盖了。

    InkWell(
        onTap: () {},
        highlightColor: Colors.blue,
        splashColor: Colors.red,
        child: Container(
          color: Colors.white,
          height: 100,
          width: 100,
          child: Text('点我'),
        ),
      )

点击区域问题

GestureDetector包裹子控件，点击空白区域点击无效解决方案

最低0.47元/天 解锁文章
小小码农dzx
关注
专栏目录
Flutter点击事件实现
AppBlog.CN全栈架构
05-05 976
参考：https://flutter.io/cookbook/gestures/handling-taps/Flutter提供的按钮控件有RaisedButton和FlatButton等。（2）在其中使用GestureDetector并复写onTap回调。带波纹效果的按钮使用InkWell。（1）创建自定义button类。
【Flutter -- 进阶】交互
Kevin Learn Android
07-21 1559
Flutter 提供了路由，实现界面间的跳转、数据传递等。
flutter实现点击事件
09-07
主要介绍了flutter实现点击事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter事件与消息通知
最新发布
Bidding
08-19 867
命中测试Listener 组件：监听原始触摸事件忽略指针事件（阻止子树接收指针事件）
flutter 点击事件写法
weixin_44911775的博客
03-03 425
【代码】flutter 点击事件写法。
flutter单击事件
student_zz的博客
09-26 257
flutter单击事件 return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // G.layout.fontGrey('我已阅读并同意 ', 12), InkWell( onTap: () => {G.pushNamed('/userAgreement')}, child: G.layout.fontWhite('《服务条款》', 12, {
Flutter_点击事件及手势处理
红烧馍的博客
04-15 2468
Flutter_点击事件和手势
flutter 中监听滑动事件
01-05
Flutter 中可以使用 Listener widget 来监听原始触摸事件，它也是一个功能性 widget。 Listener 的常见属性 属性 类型 说明 onPointerDown (PointerDownEvent event){} 手指按下时触发 onPointerMove ...
Flutter中的点击事件和回调
一杯清泉
02-22 5030
不同于Android中所有的View可以通过设置点击setOnClickListener { }方法，在Flutter有些widget是不支持直接添加onPress事件的，用法和原生区别很大，列举了常用两种方式。 一、InkWell InkWell中点击事件分为来管理点击回调和水波动画。 onTap: () // 单击 onDoubleTap: () // 双击 onLongPress: ()// 长按 InkWell( onTap: (){}, child: Cont
Flutter学习之旅(二)----MD风格和点击事件
07-21
Flutter学习之旅(二)----MD风格和点击事件,对应博客地址http://blog.csdn.net/zhangxiangliang2/article/details/75578181
flutter ui交互控件 事件
初遇你时动了情
12-21 542
很多控件不像RaisedButton、OutlineButton等已经对presses(taps)或手势做出了响应。那么如果要监听这些控件的手势就需要用另一个控件 GestureDetector。
深入了解Flutter中的GestureDetector小部件：点击事件处理
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
10-12 522
Flutter是一款流行的跨平台移动应用开发框架，允许开发人员创建高度交互性的应用程序。其中，GestureDetector小部件是处理用户手势操作的利器之一。本文将带您深入探讨如何使用GestureDetector来处理点击事件，提供实际示例和最佳实践，帮助您在Flutter应用程序中实现互动性。无论您是新手还是有经验的开发人员，都将从本文中学到有关处理点击事件的重要知识。让我们开始吧！
Flutter ：添加点击事件
青蛙不吃草
08-19 3559
flutter中有三中方式添加点击事件 InkWell InkWell( child: buildButtonColum(Icons.call, 'CALL'), onTap:(){ print('单击'); }, onDoubleTap: () { // 双击 }, onLongPress: () { // 长按 } ), GestureDetector _onCli.
flutter如何实现点击事件
weixin_40763897的博客
08-24 4305
在Android中，您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上。 在Flutter中，有两种方法: 1.如果Widget支持事件监听，则可以将一个函数传递给它并进行处理。例如，RaisedButton有一个onPressed参数 @override Widget build(BuildContext context) { return new RaisedButton( onPressed: () { print("click
Flutter 给Row Container Column Text设置点击事件
qq_59625204的博客
05-20 244
Row Container Column可以使用InkWell。不同点是InkWell具有点击效果可以自己设置点击的颜色等。也可以GestureDetector。
Flutter 给Row Container Column Text设置点击事件
丿灬安之若死
03-30 5167
InkWell child: InkWell( onTap: () { }, child: Row( ), ), 如果是Text 可以使用GestureDetector GestureDetector( child: Text(""), ...
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 时，点击事件将被禁用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值