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

2022-01-29 434

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

三、完整代码示例

完整代码示例 :

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