文章目录

• 一、Flutter 点击事件处理
• 二、GestureDetector 常用事件说明
• 三、完整代码示例
• 四、相关资源

一、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 )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。