Flutter 手势

17 Mar 2025 | 6 分钟阅读

手势是 Flutter 中一个有趣的功能，它允许我们与移动应用程序（或任何基于触摸的设备）进行交互。通常，手势定义了用户为特定控制移动设备而执行的任何物理操作或移动。手势的一些示例如下：

当移动屏幕被锁定，您可以在屏幕上滑动手指来解锁它。
点击移动屏幕上的一个按钮，以及
在基于触摸的设备上点击并按住一个应用程序图标以将其拖动到屏幕上。

我们在日常生活中使用所有这些手势与您的手机或基于触摸的设备进行交互。

Flutter 将手势系统分为两个不同的层，如下所示

指针
手势

指针

指针是第一层，表示有关用户交互的原始数据。它具有事件，描述指针（如触摸、鼠标和样式）在屏幕上的位置和移动。 Flutter 不提供任何机制来取消或停止进一步分派指针事件。 Flutter 提供了一个 Listener 窗口小部件来直接从窗口小部件层侦听指针事件。指针事件主要分为四种类型

PointerDownEvents
PointerMoveEvents
PointerUpEvents
PointerCancelEvents

PointerDownEvents： 它允许指针在特定位置接触屏幕。

PointerMoveEvents： 它允许指针在屏幕上从一个位置移动到另一个位置。

PointerUpEvents： 它允许指针停止接触屏幕。

PointerCancelEvents： 当指针交互被取消时，将发送此事件。

手势

这是第二层，它表示语义操作，例如点击、拖动和缩放，这些操作是从多个单独的指针事件中识别出来的。它还能够分派多个与手势生命周期对应的事件，如拖动开始、拖动更新和拖动结束。下面列出了一些常用的手势

点击： 这意味着用指尖触摸屏幕表面一小段时间，然后松开。此手势包含以下事件

onTapDown
onTapUp
onTap
onTapCancel

双击： 它类似于点击手势，但您需要在短时间内双击。此手势包含以下事件

onDoubleTap

拖动： 它允许我们用指尖触摸屏幕表面，并将其从一个位置移动到另一个位置，然后松开。 Flutter 将拖动分为两种类型

水平拖动： 此手势允许指针沿水平方向移动。它包含以下事件
- onHorizontalDragStart
- onHorizontalDragUpdate
- onHorizontalDragEnd
垂直拖动： 此手势允许指针沿垂直方向移动。它包含以下事件
- onVerticalDragStart
- onVerticalDragStart
- onVerticalDragStart

长按： 这意味着长时间在特定位置触摸屏幕表面。此手势包含以下事件

onLongPress

平移： 这意味着用指尖触摸屏幕表面，可以在任何方向移动而无需松开指尖。此手势包含以下事件

onPanStart
onPanUpdate
onPanEnd

捏合： 这意味着用两根手指捏合（移动一个人的手指和拇指或将它们放在触摸屏上）屏幕表面以放大或缩小屏幕。

Gesture Detector

Flutter 提供了一个窗口小部件，通过使用 GestureDetector 窗口小部件为所有类型的手势提供出色的支持。 GestureWidget 是非视觉窗口小部件，主要用于检测用户的手势。手势检测器的基本思想是一个 stateless 窗口小部件，其构造函数中包含不同触摸事件的参数。

在某些情况下，屏幕上的特定位置可能存在多个手势检测器，然后框架会消除歧义，确定应该调用哪个手势。 GestureDetector 窗口小部件根据其哪些回调不为 null 来决定要识别哪个手势。

让我们学习如何在我们的应用程序中使用这些手势，使用一个简单的 onTap() 事件，并确定 GestureDetector 如何处理它。在这里，我们将创建一个 box 窗口小部件， 根据我们的所需规范设计它，然后向其中添加 onTap() 函数。

现在，创建一个新的 Flutter 项目，并在 main.dart 文件中替换以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo Application', theme: ThemeData(
      primarySwatch: Colors.green,),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Gestures Example'),
        centerTitle: true,
      ),
      body: new Center(child: GestureDetector(
          onTap: () {
            print('Box Clicked');
          },
          child: Container(
            height: 60.0,
            width: 120.0,
            padding: EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              borderRadius: BorderRadius.circular(15.0),
            ),
            child: Center(child: Text('Click Me')),
          )
      )),
    );
  }
}

输出

当您在 Android Studio 中运行此 dart 文件时，它将在模拟器中提供以下输出。

在上图中，您可以看到屏幕中央有一个带圆角的按钮。当您点击它时，它的行为就像一个按钮，输出可以在控制台中看到。

Flutter 还提供了一组窗口小部件，可让您执行特定和高级手势。这些窗口小部件如下所示

Dismissible： 它是一种支持轻拂手势以关闭窗口小部件的窗口小部件。

Draggable： 它是一种支持拖动手势来移动窗口小部件的窗口小部件。

LongPressDraggable： 它是一种支持拖动手势来移动窗口小部件及其父窗口小部件的窗口小部件。

DragTarget： 它是一种可以接受任何 Draggable 窗口小部件的窗口小部件

IgnorePointer： 它是一种从手势检测过程中隐藏窗口小部件及其子窗口小部件的窗口小部件。

AbsorbPointer： 它是一种会停止手势检测过程本身的窗口小部件。由于此原因，任何重叠的窗口小部件都无法参与手势检测过程，因此不会引发任何事件。

Scrollable： 它是一种支持滚动窗口小部件内部可用内容的窗口小部件。

多手势示例

在本节中，我们将看到多手势在 flutter 应用程序中的工作方式。此演示应用程序由两个容器（父容器和子容器）组成。在这里，所有内容都是通过使用“RawGestureDetector”和一个自定义的“GestureRecognizer”手动处理的。自定义 GestureRecognizer 向手势列表提供了“AllowMultipleGestureRecognizer”属性，并创建了“GestureRecognizerFactoryWithHandlers”。接下来，当调用 onTap() 事件时，它会将文本打印到控制台。

打开 flutter 项目并在 main.dart 文件中替换以下代码，

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

//It is the entry point for your Flutter app.
void main() {
  runApp(
    MaterialApp(
      title: 'Multiple Gestures Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Gestures Demo'),
        ),
        body: DemoApp(),
      ),
    ),
  );
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
            AllowMultipleGestureRecognizer>(
              () => AllowMultipleGestureRecognizer(),
              (AllowMultipleGestureRecognizer instance) {
            instance.onTap = () => print('It is the parent container gesture');
          },
        )
      },
      behavior: HitTestBehavior.opaque,
      //Parent Container
      child: Container(
        color: Colors.green,
        child: Center(
          //Now, wraps the second container in RawGestureDetector
          child: RawGestureDetector(
            gestures: {
              AllowMultipleGestureRecognizer:
              GestureRecognizerFactoryWithHandlers<
                  AllowMultipleGestureRecognizer>(
                    () => AllowMultipleGestureRecognizer(),  //constructor
                    (AllowMultipleGestureRecognizer instance) {  //initializer
                  instance.onTap = () => print('It is the nested container');
                },
              )
            },
            //Creates the nested container within the first.
            child: Container(
              color: Colors.deepOrange,
              width: 250.0,
              height: 350.0,
            ),
          ),
        ),
      ),
    );
  }
}

class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

输出

当您运行该应用程序时，它将提供以下输出。

接下来，点击橙色框，以下输出将出现在您的控制台上。

It is the nested container.
It is the parent container gesture.

下一主题Flutter 状态管理

← 上一主题下一主题 →

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 手势

指针

手势

Gesture Detector

多手势示例

相关帖子

Flutter 布局

Flutter IDE

状态管理

Flutter 小部件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器