Flutter-GestureDetector缩放手势

配图来自网络,如侵必删

在使用GestureDetector组件做手势控制的时候,我们还会接触到缩放手势。这篇博客主要分享Flutter GestureDetector缩放手势的知识,希望对看文章的小伙伴有所帮助。

缩放事件的API

事件API 事件说明
onScaleStart 缩放事件有焦点的时候触发
onScaleUpdate 用户手指呈缩放手势的时候触发
onScaleEnd 触发onScaleUpdate手势之后,手指离开屏幕的时候触发

简单的使用代码

GestureDetector(
        child: Center(
          child: GestureDetector(
            child: Container(
              //使用OverflowBox可以让子组件宽高超过父组件
              child: OverflowBox(
                maxWidth: 2000.0,
                child: Image.asset('images/flutter.png', width: width),
              ),
            ),
            onScaleUpdate: (ScaleUpdateDetails e) {
              setState(() {
                //缩放倍数在0.8到10倍之间
                width = 200 * e.scale.clamp(0.8, 10);
              });
            },
          ),
        ),
      )

这个代码可以直接复制到编译器上面使用,本地图片你可以自己找或者,直接使用博客中开头的图片。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容