Flutter核心库gestures详解

gestures是Flutter核心库中的一个重要组件，它提供了许多手势检测器（Gesture Detector）和手势处理器（Gesture Recognizer），使我们能够轻松地检测和响应用户的各种手势操作，例如点击、拖动、缩放和旋转等。

GestureDetector

GestureDetector是一个widget，用于检测用户手势操作，例如点击、双击、长按、拖动、缩放和旋转等。我们可以通过在GestureDetector中添加各种GestureDetector回调函数来处理这些手势操作。

以下是一个简单的例子，展示了如何使用GestureDetector检测用户点击事件：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: GestureDetector(
        onTap: () {
          print('User tapped the screen');
        },
        child: Center(
          child: Text('My App Home Page'),
        ),
      ),
    );
  }
}

在这个例子中，我们将GestureDetector作为页面的主体，当用户点击屏幕时，我们会在控制台中输出一条消息。这样，我们就可以检测到用户的点击事件，并根据需要做出响应。

除了onTap以外，GestureDetector还提供了许多其他回调函数，例如：

• onDoubleTap：检测用户双击事件；
• onLongPress：检测用户长按事件；
• onVerticalDragDown：检测用户开始向下垂直拖动事件；
• onScaleStart：检测用户开始缩放事件。

GestureRecognizer

GestureRecognizer是Flutter中用于识别各种手势操作的基本类。它是一个抽象类，提供了许多基本方法，包括：

• onDown：检测用户按下手指的事件；
• onMoveUpdate：检测用户手指移动的事件；
• onEnd：检测用户松开手指的事件。

我们可以通过创建GestureRecognizer子类的方式来实现各种手势操作的识别。以下是一个简单的例子，展示了如何创建一个PanGestureRecognizer实例来识别用户的拖动操作：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Offset _offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            _offset += details.delta;
          });
        },
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          margin: EdgeInsets.only(top: _offset.dy, left: _offset.dx),
        ),
      ),
    );
  }
}

在这个例子中，我们在GestureDetector中注册了一个onPanUpdate回调函数来检测用户的拖动事件。在回调函数中，我们更新了偏移量（_offset），并通过调用setState来更新界面。然后，在容器的margin属性中使用偏移量来定位容器的位置，使得它可以根据用户的拖动操作移动。

除了PanGestureRecognizer以外，gestures库还提供了许多其他的手势检测器和手势识别器，包括：

• TapGestureRecognizer：识别用户的点击操作；
• LongPressGestureRecognizer：识别用户的长按操作；
• DoubleTapGestureRecognizer：识别用户的双击操作；
• ScaleGestureRecognizer：识别用户的缩放操作；
• RotationGestureRecognizer：识别用户的旋转操作；
• VerticalDragGestureRecognizer和HorizontalDragGestureRecognizer：识别用户的垂直和水平拖动操作。

这些手势检测器和手势识别器可以通过创建相应的子类实例来使用，例如：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isDoubleTapped = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: GestureDetector(
        onDoubleTap: () {
          setState(() {
            _isDoubleTapped = true;
          });
        },
        child: Center(
          child: _isDoubleTapped
              ? Text('Double tapped!')
              : Text('Tap me twice!'),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了TapGestureRecognizer的子类DoubleTapGestureRecognizer来识别用户的双击操作。当用户双击时，我们会在界面上显示一条消息。