Flutter's gesture recognition function implements GestureDetector

Introduction to GestureDetector

GestureDetectorIt is a very commonly used widget in Flutter, which provides many gesture recognition functions, including click, double click, long press, drag, zoom and so on.

Instructions

GestureDetectorOther components can be wrapped, and when the user performs gesture operations on these components, GestureDetectorthese gesture operations will be captured and corresponding callback functions will be triggered.

Commonly used callback functions

GestureDetectorThe constructor of takes GestureDetector.onTapa callback function as a parameter, and this callback function will be triggered when the user clicks on the widget. In addition onTapto , GestureDetectorthere are many other callback functions, including:

• onDoubleTap: Double click callback function.
• onLongPress: Long press callback function.
• onPanStart, onPanUpdate, onPanEnd: Drag callback function.
• onScaleStart, onScaleUpdate, onScaleEnd: Zoom callback function.

In addition to these callback functions, GestureDetectorthere are other properties, such as:

• behavior: Used to control the behavior of gesture handling, which can be HitTestBehavior.deferToChild(default value, pass the gesture to the sub-component), HitTestBehavior.opaque(handle the gesture as opaque, and will not pass it to the sub-component) or HitTestBehavior.translucent(handle the gesture as transparent, and pass it to the child component) subassembly).
• excludeFromSemantics: Used to control whether the component should be excluded in the semantic tree.
• dragStartBehavior: Used to control the behavior of the dragging start, which can be DragStartBehavior.start(default, trigger immediately when dragging starts), DragStartBehavior.down(trigger only after the finger is pressed and moves a certain distance), or DragStartBehavior.deferred(trigger only after the finger stops moving).

for example

Here's a sample code that demonstrates how to use GestureDetectorto capture user gestures:

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'),
          ),
        ),
      ),
    );
  }
}

The effect picture is as follows:

The print is as follows:

In this example, we created one GestureDetectorand set multiple callback functions for it, corresponding to different gesture operations. In childthe attribute , we use a Containerto display this GestureDetector, when the user performs gesture operations Containeron , GestureDetectorthese operations will be captured and the corresponding callback function will be triggered.

It should be noted that GestureDetectoronly gestures that overlap with its sub-components can be captured. If you need to capture gestures on the entire screen, you can GestureDetectoruse the ancestor widget GestureDetectorof or RawGestureDetector.

Zoom example

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,
            ),
          ),
        ),
      ),
    );
  }
}