IDEA激活码
文章目录
- 一、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> {
@override
Widget 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
