Flutter的手势识别功能实现GestureDetector

简介: Flutter的手势识别功能实现GestureDetector

GestureDetector简介

GestureDetectorFlutter 中一个非常常用的小部件,它提供了许多手势识别的功能,包括点击、双击、长按、拖动、缩放等等。

使用方法

GestureDetector 可以包裹其他部件,当用户在这些部件上进行手势操作时,GestureDetector 会捕捉这些手势操作并触发相应的回调函数。

常用的回调函数

GestureDetector 的构造函数接受一个 GestureDetector.onTap 的回调函数作为参数,这个回调函数会在用户点击该部件时被触发。除了 onTap 外,GestureDetector 还有很多其他的回调函数,包括:

  • onDoubleTap:双击回调函数。
  • onLongPress:长按回调函数。

onPanStart、onPanUpdate、onPanEnd:拖动回调函数。

onScaleStart、onScaleUpdate、onScaleEnd:缩放回调函数。

除了这些回调函数之外,GestureDetector 还有其他属性,比如:


behavior:用于控制手势处理的行为,可以是 HitTestBehavior.deferToChild(默认值,将手势传递给子部件),HitTestBehavior.opaque(将手势作为不透明的处理,不会传递给子部件)或HitTestBehavior.translucent(将手势作为透明的处理,会传递给子部件)。

excludeFromSemantics:用于控制该部件是否应该在语义树中排除掉。

dragStartBehavior:用于控制拖动开始的行为,可以是 DragStartBehavior.start(默认值,拖动开始时立即触发),DragStartBehavior.down(仅在手指按下并移动一定距离后触发)或 DragStartBehavior.deferred(仅在手指停止移动后触发)。

举例说明

下面是一个示例代码,演示如何使用 GestureDetector 来捕捉用户的手势操作:

import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          print('onTap');
        },
        onDoubleTap: () {
          print('onDoubleTap');
        },
        onLongPress: () {
          print('onLongPress');
        },
        onPanStart: (DragStartDetails details) {
          print('onPanStart: $details');
        },
        onPanUpdate: (DragUpdateDetails details) {
          print('onPanUpdate: $details');
        },
        onPanEnd: (DragEndDetails details) {
          print('onPanEnd: $details');
        },
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(
            child: Text('GestureDetector'),
          ),
        ),
      ),
    );
  }
}

效果图如下:


7dbb95898dbbdac17ee516dde61ea416.png

打印如下:


ee4d559abfa63557867bea3718b13f62.png

在这个示例中,我们创建了一个 GestureDetector,并为其设置了多个回调函数,分别对应不同的手势操作。在 child 属性中,我们使用一个 Container 来展示这个 GestureDetector,当用户在这个 Container 上进行手势操作时,GestureDetector 会捕捉这些操作并触发相应的回调函数。


需要注意的是,GestureDetector 仅能捕捉与其子部件重叠的手势操作。如果需要在整个屏幕上捕捉手势操作,可以使用 GestureDetector 的祖先部件 GestureDetector 或 RawGestureDetector。


缩放的例子

import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double scaleFactor = 1.0;
    Offset offset = Offset(0, 0);
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          print('onTap');
        },
        onDoubleTap: () {
          print('onDoubleTap');
        },
        onLongPress: () {
          print('onLongPress');
        },
        onScaleStart: (ScaleStartDetails details) {
          print('用户开始缩放');
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          print('用户缩放中...当前缩放比例:${details.scale}');
          scaleFactor *= details.scale;
        },
        onScaleEnd: (ScaleEndDetails details) {
          print('用户结束缩放');
        },
        child: Transform.scale(
          scale: scaleFactor,
          child: Transform.translate(
            offset: offset,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}


目录
打赏
0
0
0
0
13
分享
相关文章
|
8月前
|
flutter GestureDetector 的 behavior属性
【8月更文挑战第21天】
137 4
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
265 0
Flutter 动态修改应用图标功能指南
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
1041 1
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
119 11
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
128 2
flutter:功能性组件 (八)
本文介绍了Flutter中常用的UI组件和功能,包括进度指示器(线性和圆形)、下拉刷新、选项按钮(单选按钮、复选框、开关)、手势识别(GestureDetector、Ink和InkWell)以及提示和Offstage组件的使用方法和示例代码。这些组件和功能可以帮助开发者快速构建交互丰富的应用程序界面。
Flutter:类功能索引(全)
本文以表描述形式收录了Flutter中提供的各个类,旨在方便地进行查询相关组件。
285 2
详细介绍Flutter Profiler的功能、使用方法以及如何利用它来提升应用的性能
【6月更文挑战第11天】Flutter Profiler是用于优化Flutter应用的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者监控运行时性能,识别瓶颈,如CPU过度使用、渲染问题、内存泄漏和网络效率低。通过选择分析类型、开始分析、查看结果,开发者可进行针对性优化。最佳实践包括定期分析、结合实际场景、关注关键指标及结合其他工具。有效利用Profiler能提升应用性能和用户体验。
291 2
Flutter作为一款跨平台的移动应用开发框架,自然也提供了丰富的工具和功能来支持可访问性和无障碍设计
【6月更文挑战第11天】Flutter是一款注重可访问性设计的跨平台移动应用开发框架,提供语义化组件、文本缩放、对比度调整、动态内容更新通知和键盘导航等功能,支持无障碍体验。开发者应结合简化操作、清晰反馈、多输入方式支持及测试优化等原则,以创建包容性更强的应用,满足不同用户需求,体现社会责任。
99 1
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
180 1

热门文章

最新文章

  • 1
    ClkLog埋点分析系统-Flutter埋点上报攻略
    31
  • 2
    Flutter敏感词过滤实战:基于AC自动机的高效解决方案
    191
  • 3
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    61
  • 4
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    66
  • 5
    通过外部链接启动 Flutter App(详细介绍及示例)
    57
  • 6
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    283
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    144
  • 8
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    93
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    207
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    71