flutter photo_view的改造
app中对图片的浏览、缩放是一个常用的功能,目前有一款插件photo_view,基本上可以满足这些功能,但是有些地方需要修改完善
1.双击放大的时候,有三个状态,会有一个放大的中间状态,需要点击三次才能回到原始大小,这个不太符合用户的操作习惯,用户一般就是双击放大,然后在双击返回
2.缩小的时候,即使图片缩小到最小比例了,还需要双击下才能翻页,这个影响用户体验
3.放大的时候,不能翻页,很多app对图片浏览,即使是放大的时候也是可以翻页的,并且放大的状态保留,由于此插件基于pageview组件,pageview对子控件的缩放似乎支持的还不够好,所以作者采取的是放大的时候禁止pageview滚动这一方法来处理,在这里暂且不进行修改。
1.修改双击
PhotoViewScaleState nextScaleState(PhotoViewScaleState actual) {
switch (actual) {
case PhotoViewScaleState.initial:
//return PhotoViewScaleState.covering;
case PhotoViewScaleState.covering:
return PhotoViewScaleState.originalSize;
case PhotoViewScaleState.originalSize:
return PhotoViewScaleState.initial;
case PhotoViewScaleState.zooming:
return PhotoViewScaleState.initial;
default:
return PhotoViewScaleState.initial;
}
}
注释改行代码,使状态越过中间状态,其他地方不需要修改
2.修改缩放到最小,不需要双击就可以翻页
enum PhotoViewScaleState { initial, covering, originalSize, zooming,minscale }
添加一个状态
minscale
void onScaleEnd(ScaleEndDetails details) {
final double maxScale = widget.scaleBoundaries.computeMaxScale();
final double minScale = widget.scaleBoundaries.computeMinScale();
//animate back to maxScale if gesture exceeded the maxScale specified
if (_scale > maxScale) {
final double scaleComebackRatio = maxScale / _scale;
animateScale(_scale, maxScale);
final Offset clampedPosition =
clampPosition(_position * scaleComebackRatio, maxScale);
animatePosition(_position, clampedPosition);
return;
}
//animate back to minScale if gesture fell smaller than the minScale specified
if (_scale < minScale) {
final double scaleComebackRatio = minScale / _scale;
animateScale(_scale, minScale);
animatePosition(
_position, clampPosition(_position * scaleComebackRatio, minScale));
widget.setNextScaleState(PhotoViewScaleState.minscale);
return;
}
// get magnitude from gesture velocity
final double magnitude = details.velocity.pixelsPerSecond.distance;
// animate velocity only if there is no scale change and a significant magnitude
if (_scaleBefore / _scale == 1.0 && magnitude >= 400.0) {
final Offset direction = details.velocity.pixelsPerSecond / magnitude;
animatePosition(_position, clampPosition(_position + direction * 100.0));
}
}
代码中添加这一句
widget.setNextScaleState(PhotoViewScaleState.minscale); if判断增加这一句,目的是为了避免二次刷新
void didUpdateWidget(PhotoViewImageWrapper oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.scaleState != widget.scaleState &&
widget.scaleState != PhotoViewScaleState.zooming&& widget.scaleState != PhotoViewScaleState.minscale) {
final double prevScale = _scale == null
? getScaleForScaleState(widget.size, PhotoViewScaleState.initial,
widget.childSize, widget.scaleBoundaries)
: _scale;
final double nextScale = getScaleForScaleState(widget.size,
widget.scaleState, widget.childSize, widget.scaleBoundaries);
animateScale(prevScale, nextScale);
animatePosition(_position, Offset.zero);
animateRotation(_rotation, 0.0);
}
}
同样在这里也要增加判断,该状态下设置pageview的滚动特性
void scaleStateChangedCallback(PhotoViewScaleState scaleState) {
setState(() {
_locked = (scaleState != PhotoViewScaleState.initial &&
scaleState != PhotoViewScaleState.minscale);
});
widget.scaleStateChangedCallback != null
? widget.scaleStateChangedCallback(scaleState)
: null;
}
代码在这三个文件里,可以将源文件放于一个目录下
flutter photo_view的改造的更多相关文章
- Flutter混合工程改造实践
背景 6月下旬,我们首次尝试用Flutter开发AI拍app.开发的调研准备阶段没有参考业界实践,导致我们踩到一些填不上的坑.在这些坑中,最让我感到棘手的是Flutter和原生页面混合栈管理的问题. ...
- flutter中的异步机制Future
饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...
- flutter中的异步机制 Future
饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...
- Flutter 的异步机制Future
Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到卡顿,于是通常用异步处理来解决这个问题. Dart ...
- 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app
为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...
- 对flutter中,ExpsionPanel的简单改造
因为项目有大量的下拉面板,而默认的组件(默认的padding.颜色.大小)不是我们UI设计上想要的,但是每个地方都要去改又很麻烦.于是我就想,可以对这个组件进行定制化改造,传入一些颜色.参数.图标大小 ...
- Flutter 实现原理及在马蜂窝的跨平台开发实践
一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和 ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- Flutter路由的跳转、动画与传参(最简单)
跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...
随机推荐
- ios逆向工程-内部钩子(Method Swizzling)
Method Swizzling(方法调配) 怎么说呢,先了解什么是钩子为什么用钩子,学过C++的朋友应该清楚,hook就是用来获得(截断/改变)底层调用的方法.这样我们可以自由的修改或者读取一些想要 ...
- selenium-java,定位并操作frame和iframe内的元素
因为frame和iframe的原因,在frame里的元素不能直接定位需要切到相应的frame才可以对元素进行操作,下面是涉及的方法 webDriver.switchTo().defaultConten ...
- LOJ2324. 「清华集训 2017」小 Y 和二叉树【贪心】【DP】【思维】【好】
LINK 思路 首先贪新的思路是处理出以一个节点为根所有儿子的子树中中序遍历起始节点最小是多少 然后这个可以两次dfs来DP处理 然后就试图确定中序遍历的第一个节点 一定是siz<=2的编号最小 ...
- BZOJ3141 Hnoi2013 游走 【概率DP】【高斯消元】*
BZOJ3141 Hnoi2013 Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点 ...
- RNG—随机数产生器
RNG 随机数产生器 RNG g_rng(12345); /********************************************************************** ...
- cell的循环利用
方式1 // 1.先根据cell的标识去缓存池中查找可循环利用的cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdent ...
- oracle数据库存储过程分页
CREATE OR REPLACE PROCEDURE prc_query (p_tableName in varchar2, --表名 p_columnNames in varchar2, --字段 ...
- 如何优雅的使用RabbitMQ(转)
RabbitMQ无疑是目前最流行的消息队列之一,对各种语言环境的支持也很丰富,作为一个.NET developer有必要学习和了解这一工具.消息队列的使用场景大概有3种: 1.系统集成,分布式系统的设 ...
- hadoop之 distcp(分布式拷贝)
概述 distcp(分布式拷贝)是用于大规模集群内部和集群之间拷贝的工具. 它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成. 它把文件和目录的列表作为map任务的输入,每个任务会 ...
- vue的动画组件(transition)
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
