Flutter使用GestureDetector工具实现手势缩放效果

GestureDetector是Flutter内部处理用户手势操作的一个小工具。

如果想要实现缩放效果需要利用到其中两个方法

onScaleStart :当用户触碰屏幕并开始缩放的时候

onScaleUpdate:当用户正在执行缩放时候

ScaleUpdateDetails 是作为函数参数进行传递的,它有以下属性

1、scale 表示上一帧的缩放比例

2、focalPoint 缩放手势中心点坐标

3、pointerCount 当前触控点数量(小于一个点说明没有用手势缩放)

这里主要用到scale这个参数。

示例:

Dart 复制代码
class ScalePage extends StatefulWidget {
  const ScalePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return GestureDetectorPageTest();
  }
}

class GestureDetectorPageTest extends State<ScalePage> {
  double _scale = 1.0;
  double _startScale = 1.0;
  bool ifScale = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("手势处理工具GestureDetector"),
      ),
      body: Container(
        color: Colors.amber,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: GestureDetector(
          child: Transform.scale(
            scale: _scale,
            child: const Image(image: AssetImage('images/a.png')),
          ),
          onScaleStart: (e) {
            _startScale = _scale;
          },
          onScaleUpdate: (e) {
            setState(() {
              _scale = _startScale * e.scale;
                //clamp 表示缩放最大不超过原图的两倍,最小不小于原图的0.5倍
              _scale = _scale.clamp(0.5, 2.0);
            });
          },
          onScaleEnd: (e) {

          },
          onDoubleTap: () {
            setState(() {
              if (ifScale) {
                _scale = _startScale * 2;
              } else {
                _scale = _startScale / 2;
              }
              _scale = _scale.clamp(0.5, 2.0);
              ifScale = !ifScale;
            });
          },
        ),
      ),
    );
  }
}
相关推荐
孤鸿玉2 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥9 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart