提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

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

flutter 交互 点击 取消 双击 手势 事件处理 按下
2023-06-13 09:17:49 时间

文章目录

一、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: 双击

四、相关资源

参考资料 :

博客源码下载 :

相关文章