【 Flutter 手势探索】我的第二本小册来了

在Flutter中，我们可以使用手势识别来实现各种功能，例如拖拽、缩放、旋转等。下面是一个简单的示例，展示如何使用GestureDetector来实现一个可拖拽、可缩放、可旋转的容器：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDemo(),
    );
  }
}
 
class GestureDemo extends StatefulWidget {
  @override
  _GestureDemoState createState() => _GestureDemoState();
}
 
class _GestureDemoState extends State<GestureDemo> {
  double _scale = 1.0;
  double _previousScale = 1.0;
 
  Matrix4 _matrix = Matrix4.identity();
 
  var _position = Offset(0.0, 0.0);
  var _positionDelta = Offset(0.0, 0.0);
 
  void _onScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      _previousScale = _scale;
      _scale = _previousScale * details.scale;
 
      // Calculate the translation based on the scale change.
      var offset = details.focalPoint - _position;
      _positionDelta = Offset(
        offset.dx / _previousScale,
        offset.dy / _previousScale,
      );
 
      _position += _positionDelta;
 
      // Update the matrix.
      _matrix
        ..identity()
        ..translate(_position.dx, _position.dy)
        ..scale(_scale)
        ..translate(-details.focalPoint.dx, -details.focalPoint.dy);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gesture Exploration'),
      ),
      body: GestureDetector(
        onScaleUpdate: _onScaleUpdate,
        child: Transform(
          transform: _matrix,
          child: Container(
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(
                color: Colors.black,
                width: 2.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这段代码中，我们创建了一个可以被缩放和旋转的容器。GestureDetector组件用于处理各种手势事件，onScaleUpdate回调用于处理缩放手势。我们通过Transform组件应用变换矩阵 _matrix 来实现容器的变换。代码中还包含了一些计算偏移量和缩放比例的逻辑，以确保容器的缩放和位置在每次手势更新时都能正确更新。