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

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

文章目录

一、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 : 单击抬起事件 ;


目录
相关文章
|
3月前
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
|
4月前
|
容器
flutter GestureDetector 点击空白区域无反应解决办法
flutter GestureDetector 点击空白区域无反应解决办法
120 0
|
5月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
94 0
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
flutter系列之:移动端手势的具体使用
之前我们介绍了GestureDetector的定义和其提供的一些基本的方法,GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。 今天将会通过几个具体的例子来讲解一下GestureDetector的具体使用。
flutter系列之:移动端手势的具体使用
|
Android开发 iOS开发 UED
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(上)
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇
192 0
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(上)
|
Android开发 iOS开发
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(中)
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇
136 0
|
JavaScript 测试技术 Android开发
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(下)
闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇
124 0
|
Web App开发 缓存 JSON
Android 集成 Flutter | 与交互
Android 集成 Flutter | 与交互
Android 集成 Flutter | 与交互
【交互 widget】Flutter Dialog
【交互 widget】Flutter Dialog
282 0
【交互 widget】Flutter Dialog