Flutter 中 Image 的使用详解(二) | Flutter Widgets

这是我参与更文挑战的第22天，活动详情查看： 更文挑战

前言

前一篇咱们聊了 Image 的经常使用参数、对齐、缩放、混合模式的调配效果，这篇咱们继续聊一些不太经常使用参数但可能会帮助到你优化 Image 的展现效果。

加载状态

并非每次下载图片资源均可以 100% 成功的，用户的网络状态是很是复杂的，这时咱们就须要优化图片的展现，让用户知道出现了什么状况，下一步应该怎么办。

默认错误展现

若是咱们不作处理，则会展现成这个样子，体验很是很差。

errorBuilder

常见的就是网络错误致使下载失败，这时咱们就须要展现一个错误的提示，来优化上面的展现。

Image.network(
  url2,
  width: 375,
  height: 375,
  // 加载错误
  errorBuilder: (context, error, stackTrace) {
    return Container(
      width: 375,
      height: 375,
      alignment: Alignment.center,
      child: Icon(
        Icons.error,
        color: Colors.red,
      ),
    );
  },
)
复制代码

效果

目前只是展现了一个居中的错误图标，你能够加上更多，好比点击重试等

loadingBuilder

有时用户的网络速度很慢或者图片偏大，这时就须要让用户知道下载进度如何了，还要等待多久。咱们就须要展现下载进度了。

Image.network(
  'test',
  // url2,
  width: 375,
  height: 375,
  // 加载中
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) {
      return child;
    }
    return Container(
      width: 375,
      height: 375,
      alignment: Alignment.center,
      // 设置下载进度
      child: CircularProgressIndicator(
        value: loadingProgress.cumulativeBytesLoaded /
        loadingProgress.expectedTotalBytes!),
    );
  },
)
复制代码

效果

上图能够看出咱们设置了一个下载进度，相对来讲就友好不少。

frameBuilder

上一步看出显示的时候仍是有些突兀，怎么办呢？还记得咱们以前聊的 AnimatedOpacity 吗？这里就可使用一下

Image.network(
  url2,
  width: 375,
  height: 375,
  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      return child;
    }
		// 设置不透明度动画
    return AnimatedOpacity(
      opacity: frame == null ? 0 : 1,
      duration: Duration(seconds: 2),
      child: child,
    );
  },
)
复制代码

效果

这样效果就好不少了，接下来就是咱们封装成一个通用的组件便可在项目中复用啦。

repeat - 重复排布

上篇咱们聊了缩放的方式来填充目标区域，这里咱们再补充一种方式，设置 repeat 便可，这里 ImageRepeat 总共有 4 种排布方式，下面咱们来看看吧。

// 这里url 咱们设置的图片比较小
// 图片 url3
  String url3 =
      'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=60';
// 加载图片
Image.network(
  url3,
  width: 375,
  height: 375,
  fit: BoxFit.none,
  // 重复排布参数调配
  repeat: ImageRepeat.noRepeat,
  // repeat: ImageRepeat.repeat,
  // repeat: ImageRepeat.repeatX,
  // repeat: ImageRepeat.repeatY,
)
复制代码

效果

ImageRepeat.noRepeat（默认）	ImageRepeat.repeat
ImageRepeat.repeatX	ImageRepeat.repeatY

filterQuality - 图像渲染质量

有时咱们图片质量不是很好，可是展现上又但愿有一个相对好一点的效果，这个时候怎么办呢？设置图片渲染质量有怎么得效果呢？咱们一块儿来看看

Image.network(
  url3,
  width: 375,
  height: 375,
  fit: BoxFit.cover,
  // 渲染质量参数调配
  filterQuality: FilterQuality.none,
  // filterQuality: FilterQuality.low,
  // filterQuality: FilterQuality.medium,
  // filterQuality: FilterQuality.high,
)
复制代码

效果展现

FilterQuality.none（默认）	FilterQuality.low
FilterQuality.medium	FilterQuality.high

这里不一样的质量会采用不一样的算法来处理渲染图片，但效率和质量是成反比的，通常咱们不作设置处理，考虑好图片的分辨率便可。

最后这里再放一张官方的对比图看看

总结

到这里整个 Image 就聊完了，小小的一个 Image 就聊了 3 篇内容，里面涉及到不少基础的知识点，咱们也没有特别展开的聊，就把一些经常使用的和优化的细节点聊了聊，就到这里，若是以为对你有帮助，记得关注我哦

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考连接

• Image (Flutter Widget of the Week)
• Flutter-Image

关注专栏

• 此文章已收录到下面👇 的专栏，能够直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦