flutter学习-day23-使用extended_image处理图片的加载和操作

文章目录

  • [1. 介绍](#1. 介绍)
  • [2. 属性介绍](#2. 属性介绍)
  • [3. 使用](#3. 使用)

1. 介绍

在 Flutter 的开发过程中,经常会遇到图片的显示和加载处理,通常显示一个图片,都有很多细节需要处理,比如图片的加载、缓存、错误处理、图片的压缩、图片的格式转换等,如果每个地方都手动处理,就太麻烦了,这时候就可以使用糖果大佬的插件 extended_image,它是官方 Image 的扩展三方库,不但支持图片加载以及失败显示,缓存网络图片,缩放拖拽图片,图片浏览等,还支持滑动退出页面,编辑图片(裁剪旋转翻转),保存,绘制自定义效果等功能。

效果图:

2. 属性介绍

属性 描述
url 网络请求地址 required
key 唯一标识符 -
semanticLabel 语义标签 -
excludeFromSemantics 是否排除语义 false
width 宽度 -
height 高度 -
color 颜色 -
opacity 透明度动画 -
colorBlendMode 颜色混合模式 -
fit 图片适应方式 -
alignment 对齐方式 Alignment.center
repeat 图片重复方式 ImageRepeat.noRepeat
centerSlice 九宫格切片区域 -
matchTextDirection 是否匹配文本方向 false
gaplessPlayback 是否无缝播放 false
filterQuality 滤镜质量 FilterQuality.low
loadStateChanged 图片加载状态回调 Function
shape 盒子形状 -
border 盒子边框 -
borderRadius 圆角半径 -
clipBehavior 裁剪行为 Clip.antiAlias
enableLoadState 是否启用加载状态 true
beforePaintImage 图片绘制前回调 -
afterPaintImage 图片绘制后回调 -
mode 扩展图片模式(默认/手势/编辑) ExtendedImageMode.none
enableMemoryCache 是否启用内存缓存 true
clearMemoryCacheIfFailed 加载失败时是否清除内存缓存 true
onDoubleTap 双击事件回调 -
initGestureConfigHandler 初始化手势配置回调 -
enableSlideOutPage 是否启用滑动退出页面 false
constraints 约束条件 -
cancelToken 用于取消请求的 Token CancellationToken()
retries 请求尝试次数 3
timeLimit 请求超时时间 -
headers 请求头 -
cache 是否缓存 true
scale 图片缩放比例 1.0
timeRetry 请求重试间隔 milliseconds: 100
extendedImageEditorKey 扩展图片编辑器键 -
initEditorConfigHandler 初始化编辑器配置回调 -
heroBuilderForSlidingPage 滑动退出页面时的英雄构建器 -
clearMemoryCacheWhenDispose 销毁时是否清除内存缓存 false
handleLoadingProgress 是否处理加载进度 false
extendedImageGestureKey 扩展图片手势键 -
cacheWidth 缓存宽度 -
cacheHeight 缓存高度 -
isAntiAlias 是否开启抗锯齿 false
cacheKey 缓存键 -
printError 是否打印错误信息 true
compressionRatio 压缩比例 -
maxBytes 最大字节数 -
cacheRawData 是否缓存原始数据 false
imageCacheName 图片缓存名称 -
cacheMaxAge 缓存最大寿命 -
layoutInsets 布局插入区域 EdgeInsets.zero

3. 使用

更详细的使用方式,请参考extended_image 文档,本例子只针对图片的加载、成功、失败的处理以及放大查看。

dart 复制代码
ExtendedImage.network(
  imagePath,
  width: double.infinity,
  fit: BoxFit.fitHeight,
  cache: true,
  mode: ExtendedImageMode.gesture,
  initGestureConfigHandler: (state) {
    return GestureConfig(
      // 缩放最小值
      minScale: 0.8,
      // 缩放动画最小值 当缩放结束时回到 minScale 值
      animationMinScale: 0.8,
      // 缩放最大值
      maxScale: 2.0,
      // 缩放动画最大值 当缩放结束时回到 maxScale 值
      animationMaxScale: 3.5,
      // 缩放拖拽速度
      speed: 1.0,
      // 拖拽惯性速度
      inertialSpeed: 100.0,
      initialScale: 1.0,
      // 是否使用 ExtendedImageGesturePageView 展示图片
      inPageView: false,
      // 当图片的初始化缩放大于 1.0 的时候,根据相对位置初始化图片
      initialAlignment: InitialAlignment.center
    );
  },
  /// 加载状态回调
  loadStateChanged: (ExtendedImageState state) {
    switch (state.extendedImageLoadState) {
      /// 加载中
      case LoadState.loading:
        // 自己写的加载中的Loading组件
        return LoadWait();

      /// 加载成功
      case LoadState.completed:
        return state.completedWidget;

      /// 加载失败
      case LoadState.failed:
        // 自己写的加载失败的组件 并且把重试的回调传递过去
        return LoadFailed(callback: state.reLoadImage);
    }
  }
)

本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

个人主页

相关推荐
Mephisto.java24 分钟前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka
晨曦_子画30 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
孤客网络科技工作室1 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
南宫生1 小时前
贪心算法习题其三【力扣】【算法学习day.20】
java·数据结构·学习·算法·leetcode·贪心算法
武子康2 小时前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘
Mr Lee_2 小时前
android 配置鼠标右键快捷对apk进行反编译
android
使者大牙2 小时前
【大语言模型学习笔记】第一篇:LLM大规模语言模型介绍
笔记·学习·语言模型
As977_3 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
ajsbxi3 小时前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking3 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js