Flutter手势识别插件matrix_gesture_detector的使用

Flutter手势识别插件matrix_gesture_detector的使用

MatrixGestureDetector 可以检测平移、缩放和旋转手势，并将它们组合成一个 Matrix4 对象。这个对象可以被 Transform 小部件或底层的 CustomPainter 代码使用。你可以通过传递 shouldTranslate、shouldScale 和 shouldRotate 参数来定制报告的手势类型。

开始使用

使用方法如下：

MatrixGestureDetector(
  onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
    setState(() {
      matrix = m;
    });
  },
  child: SomeWidgetThatUsesMatrix(
    matrix: matrix,
    // 其他参数...
  )
)

这里，SomeWidgetThatUsesMatrix 可以是一个 Transform 小部件（例如 transform_demo.dart）或者一个 CustomPaint 小部件，其 CustomPainter 在低级绘制代码中使用 Matrix4。

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 MatrixGestureDetector。

import 'package:flutter/material.dart';

import 'blur_demo.dart';
import 'custom_painter_demo.dart';
import 'transform_demo.dart';
import 'transform_demo2.dart';
import 'transform_demo3.dart';
import 'transform_demo4.dart';

List<Demo> demos = [
  Demo(
    'CustomPainter Demo',
    '此演示展示如何使用矩阵进行自定义画布绘制',
    CustomPainterDemo(),
  ),
  Demo(
    'Transform Demo',
    '此演示展示如何使用标准 Transform 小部件中的矩阵',
    TransformDemo(),
  ),
  Demo(
    'Transform Demo 2',
    '此演示展示如何使用标准 Transform 小部件中的矩阵',
    TransformDemo2(),
  ),
  Demo(
    'Transform Demo 3',
    '此演示展示如何使用标准 Transform 小部件中的矩阵',
    TransformDemo3(),
  ),
  Demo(
    'Transform Demo 4',
    '此演示展示如何使用标准 Transform 小部件中的矩阵',
    TransformDemo4(),
  ),
  Demo(
    'Blur Demo',
    '此演示展示如何使用矩阵绘制自定义形状',
    BlurDemo(),
  ),
];

void main() => runApp(MaterialApp(
      title: 'MatrixGestureDetector Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('MatrixGestureDetector Demo'),
        ),
        body: Builder(
          builder: (BuildContext ctx) {
            return Center(
              child: SingleChildScrollView(
                child: Column(
                  children: demos
                      .map((demo) => ListTile(
                            onTap: () => showDemo(ctx, demo),
                            leading: Icon(Icons.image),
                            title: Text(demo.title),
                            subtitle: Text(demo.subtitle),
                          ))
                      .toList(),
                ),
              ),
            );
          },
        ),
      ),
    ));

showDemo(BuildContext ctx, Demo demo) {
  print('显示 ${demo.title}...');
  Navigator.of(ctx).push(MaterialPageRoute(builder: (ctx) => demo.widget));
}

class Demo {
  String title;
  String subtitle;
  Widget widget;

  Demo(this.title, this.subtitle, this.widget);
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 MatrixGestureDetector 来处理手势并更新 Matrix4 对象。

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Matrix4 matrix = Matrix4.identity();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MatrixGestureDetector(
      onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
        setState(() {
          matrix = m;
        });
      },
      child: Container(
        color: Colors.grey[200],
        child: Center(
          child: Transform(
            transform: matrix,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
      home: MyHomePage(),
    ));