Flutter的手势识别功能实现GestureDetector

GestureDetector简介

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

使用方法

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

常用的回调函数

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

  • onDoubleTap:双击回调函数。
  • onLongPress:长按回调函数。
  • onPanStartonPanUpdateonPanEnd:拖动回调函数。
  • onScaleStartonScaleUpdateonScaleEnd:缩放回调函数。

除了这些回调函数之外,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 {
  
  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'),
          ),
        ),
      ),
    );
  }
}

效果图如下:
Flutter的手势识别功能实现GestureDetector_第1张图片
打印如下:
Flutter的手势识别功能实现GestureDetector_第2张图片
在这个示例中,我们创建了一个 GestureDetector,并为其设置了多个回调函数,分别对应不同的手势操作。在 child 属性中,我们使用一个 Container 来展示这个 GestureDetector,当用户在这个 Container 上进行手势操作时,GestureDetector 会捕捉这些操作并触发相应的回调函数。

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

缩放的例子

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  
  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,
            ),
          ),
        ),
      ),
    );
  }
}

你可能感兴趣的:(Flutter,flutter,GestureDetector,手势,Android,IOS)