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

1. 介绍

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

效果图：

2. 属性介绍

3. 使用

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

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);
    }
  }
)

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

往期文章

• flutter学习-day1-环境搭建和启动第一个项目
• flutter学习-day12-可滚动组件和监听
• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金