一、Flutter 点击事件处理

Flutter 点击事件处理的组件是 GestureDetector 组件 ;

GestureDetector 组件中可设置的选项 , 在构造函数中的可选参数中, 大部分是回调方法设置字段 ;

class GestureDetector extends StatelessWidget {GestureDetector({Key key,this.child,this.onTapDown, // 按下this.onTapUp, // 抬起this.onTap, // 单击this.onTapCancel, // 单击取消this.onSecondaryTapDown,this.onSecondaryTapUp,this.onSecondaryTapCancel,this.onDoubleTap, // 双击this.onLongPress, // 长按this.onLongPressStart,this.onLongPressMoveUpdate,this.onLongPressUp,this.onLongPressEnd,this.onVerticalDragDown,this.onVerticalDragStart,this.onVerticalDragUpdate,this.onVerticalDragEnd,this.onVerticalDragCancel,this.onHorizontalDragDown,this.onHorizontalDragStart,this.onHorizontalDragUpdate,this.onHorizontalDragEnd,this.onHorizontalDragCancel,this.onForcePressStart,this.onForcePressPeak,this.onForcePressUpdate,this.onForcePressEnd,this.onPanDown,this.onPanStart,this.onPanUpdate,this.onPanEnd,this.onPanCancel,this.onScaleStart,this.onScaleUpdate,this.onScaleEnd,this.behavior,this.excludeFromSemantics = false,this.dragStartBehavior = DragStartBehavior.start,})
}

GestureDetector 组件用法 :

设置各种回调事件 : 在 onXxx 字段设置各种回调事件 , 字段类型是 void Function() 类型的 ;
作用组件 : 在 child 字段设置手势检测的主体组件 , 就是监听哪个组件的手势事件 ;

// 手势检测组件
GestureDetector(// 点击事件onTap: (){print("双击");},// 双击事件onDoubleTap: (){print("双击");},// 长按事件 , ()=>方法名(参数列表) 即可回调一个现有方法onLongPress: () => _longPress(),// 点击取消onTapCancel: (){print("点击取消");},// 点击按下onTapDown: (e){print("点击按下");},// 点击抬起onTapUp: (e){print("点击抬起");},// 手势检测的作用组件 , 监听该组件上的各种手势child: Container(// 子组件居中alignment: Alignment.center,// 内边距padding: EdgeInsets.all(100),// 背景装饰decoration: BoxDecoration(color: Colors.green,),child: Text("手势检测",style: TextStyle(fontSize: 50,color: Colors.red,),),),
)

二、GestureDetector 常用事件说明

GestureDetector 常用事件说明 :

onTap : 单击事件 ;
onDoubleTap : 双击事件 ;
onLongPress : 长按事件 ;
onTapCancel : 点击事件取消 , 一个完整的点击事件由按下 , 抬起组成 , 如果按下后一直没有松开 , 就变成了长按操作 , 此时单击事件自动取消 ; 如果按下后滑出了 child 组件 , 则自动变为点击取消事件 ;
onTapDown : 单击按下事件 ;
onTapUp : 单击抬起事件 ;

三、完整代码示例

完整代码示例 :


import 'package:flutter/material.dart';class GesturePage extends StatefulWidget {@override_GesturePageState createState() => _GesturePageState();
}class _GesturePageState extends State<GesturePage> {@overrideWidget build(BuildContext context) {return MaterialApp(// 设置主题theme: ThemeData(primarySwatch: Colors.amber,),// 设置主体组件home: Scaffold(// 设置标题栏appBar: AppBar(title: Text("手势检测"),// 返回按钮设置leading: GestureDetector(// 点击事件回调函数onTap: (){// 退出当前界面Navigator.pop(context);},// 回退按钮图标child: Icon(Icons.arrow_back),),),// 水平/垂直方向平铺组件body: FractionallySizedBox(// 水平方向平铺widthFactor: 1,// 帧布局child: Stack(children: <Widget>[// 垂直方向线性布局Column(children: <Widget>[// 手势检测组件GestureDetector(// 点击事件onTap: (){print("双击");},// 双击事件onDoubleTap: (){print("双击");},// 长按事件 , ()=>方法名(参数列表) 即可回调一个现有方法onLongPress: () => _longPress(),// 点击取消onTapCancel: (){print("点击取消");},// 点击按下onTapDown: (e){print("点击按下");},// 点击抬起onTapUp: (e){print("点击抬起");},// 手势检测的作用组件 , 监听该组件上的各种手势child: Container(// 子组件居中alignment: Alignment.center,// 内边距padding: EdgeInsets.all(100),// 背景装饰decoration: BoxDecoration(color: Colors.green,),child: Text("手势检测",style: TextStyle(fontSize: 50,color: Colors.red,),),),)],)],),),),);}/// 长按事件void _longPress(){print("长按");}
}

运行效果展示 :

打印结果 :

2021-03-02 20:26:54.072 15660-15678/com.example.flutter_cmd I/flutter: 点击按下
2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter: 点击抬起
2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter: 双击
2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 点击按下
2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 点击抬起
2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 双击
2021-03-02 20:26:59.279 15660-15678/com.example.flutter_cmd I/flutter: 点击按下
2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter: 点击取消
2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter: 长按
2021-03-02 20:27:02.233 15660-15678/com.example.flutter_cmd I/flutter: 点击按下
2021-03-02 20:27:02.284 15660-15678/com.example.flutter_cmd I/flutter: 点击取消
2021-03-02 20:27:02.634 15660-15678/com.example.flutter_cmd I/flutter: 长按
2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 点击按下
2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 点击抬起
2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 双击

四、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )相关推荐

android之实现各个组件点击事件处理
android之实现各个组件点击事件处理: 注意:(TextView这个组件要点击产生效果的话,要设置,android:clickable="true"这个属性) 布局:layou ...
flutter onPressed onTap等手势检测及触摸事件处理
我怎么给 Flutter 的 widget 添加一个点击监听者? 在 Flutter 中,有两种方法来添加点击监听者: 1.如果 widget 本身支持事件监测,直接传递给它一个函数,并在这个函数里实 ...
flutter GestureDetector 手势处理
[x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程免费开源关注你不会迷路 [x3]系列文章百万 Demo 随时复制粘贴使用 flutter Gestur ...
flutter和原生交互
一.Flutter中使用Android Studio打开原生文件选中Android目录--右键--选中flutter---Open for Editing in Android Studio 问题1 ...
阿衰java免费版_flutter plugin之路：flutter与原生交互传值OC/java版(一)
说在前头:flutter虽然很牛掰,但是目前很多功能或者插件的实现其实还是需要通过原生来实现,然后通过flutter和原生的交互传值实现数据的交换. -本篇是flutter调用原生方法,然后原生执行完 ...
Flutter之手势监听
常用的三个手势监听 OnTap:点击 OnDoubleTap:双击 OnLongPress:长按 import 'package:flutter/material.dart';class Getstu ...
Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘
前言 JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于 ...
ios开发学习-手势交互（Gesture）效果源码分享
qianqianlianmeng ios开发学习-手势交互(Gesture)效果源码分享 All Around Pull View 介绍:实现视图四个方向(上下左右)都能够拖动更新(pull to r ...
基于meanshift的手势跟踪与电脑鼠标控制（手势交互系统）
基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...

【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )

文章目录

一、Flutter 点击事件处理

二、GestureDetector 常用事件说明

三、完整代码示例

四、相关资源

【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )相关推荐

最新文章

热门文章