Flutter 自定义缩放控件

转载请注明出处,点击此处 查看更多精彩内容。

最近在学习 Flutter,俗话说的好,纸上得来终觉浅,所以动手撸了一个 gank.io 的 APP,有兴趣的可以 到 GitHub 看看源码

本文将与大家分享项目中自定义的缩放控件 GestureZoomBox

功能

  • 双击缩放。
  • 双指缩放。
  • 以双击位置/双指位置作为缩放中心。
  • 限制缩放/拖动范围,超过范围自动回弹。
  • 作为父级 Widget 直接嵌套,无侵入。
    demo_big_image.gif

核心原理

手势识别

GestureDetector

Flutter 已经提供了 GestureDetector 处理手势(点击、双击、缩放、拖动),我们只要将可缩放内容作为 GestureDetector 的 child 并设置相应手势回调即可。

Pan and scale callbacks cannot be used simultaneous because scale is a superset of pan. Simply use the scale callbacks instead.

这是源码中的注释,大意是“缩放是平移的超集,两者不能同时使用,只需使用缩放回调即可”。因此我们只需要用到以下回调:

/// 双击事件回调,用来处理双击缩放。
final GestureTapCallback onDoubleTap;

/// 缩放值或者拖动位置发生改变。在这里根据每次的变化量进行缩放/拖动处理。
final GestureScaleUpdateCallback onScaleUpdate;

/// 缩放/拖动结束。用来检测并处理超过边界的情况。
final GestureScaleEndCallback onScaleEnd;

缩放和平移

使用 Transform 进行缩放和平移处理。

// 当前缩放值
double _scale = 1.0;

// 当前偏移值
Offset _offset = Offset.zero;

...

// 使用 Transform 包裹 child ,以便进行平移和缩放处理
Transform(
  transform: Matrix4.identity()
    ..translate(_offset.dx, _offset.dy)
    ..scale(_scale, _scale),
  child: widget.child,
  alignment: Alignment.center,
)

使用方法

添加依赖

dependencies:
  gesture_zoom_box: ^0.0.2

导包

import 'package:gesture_zoom_box/gesture_zoom_box.dart';

使用控件

GestureZoomBox(
    maxScale: 5.0,
    doubleTapScale: 2.0,
    duration: Duration(milliseconds: 200),
    onPressed: () => Navigator.pop(context),
    child: Image.network(widget.imageUrl),
)

项目地址

GitHub | Pub

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值