Flutter -- 手势识别（GestureDetector）缩放效果

GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。接下来我们实现：在图片上双指张开、收缩就可以放大、缩小图片。示例如下：

1.首先配置图片，在工程根目录下新建目录images，把图片拷贝进去：

2.在pubspec.yaml增加如下内容：

3.onScaleUpdate()：缩放过程中的事件监听，具体可查阅：https://github.com/flutter/flutter/blob/1aedbb1835/packages/flutter/lib/src/gestures/scale.dart#L173

代码片段为：

​
import 'package:flutter/cupertino.dart';


void main() {
  runApp(GestureDetectorPage());
}

class GestureDetectorPage extends StatefulWidget {
  _GestureDetectorTestRouteState createState() =>
      new _GestureDetectorTestRouteState();
}

double _width = 200.0;

class _GestureDetectorTestRouteState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
          child: Image.asset(
            "images/icon_bg.png",
            width: _width,
          ),
          onScaleUpdate: (ScaleUpdateDetails details) {
            setState(() {
              _width = 200 * details.scale.clamp(0.7, 10.0);
            });
          }),
    );
  }
}

​

参考文档：

https://book.flutterchina.club/

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html