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<GestureDetectorPage> {
  @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