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

713 阅读3分钟

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

前言

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

加载状态

并不是每次下载图片资源都可以 100% 成功的,用户的网络状态是非常复杂的,这时我们就需要优化图片的展示,让用户知道出现了什么情况,下一步应该怎么办。

默认错误展示

如果我们不做处理,则会展示成这个样子,体验非常不好。
image.png

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

效果

image.png
目前只是展示了一个居中的错误图标,你可以加上更多,比如点击重试等

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

效果

01.gif
上图可以看出我们设置了一个下载进度,相对来说就友好很多。

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

效果

03.gif
这样效果就好很多了,接下来就是我们封装成一个通用的组件即可在项目中复用啦。

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
image.pngimage.png
ImageRepeat.repeatXImageRepeat.repeatY
image.pngimage.png

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
image.pngimage.png
FilterQuality.mediumFilterQuality.high
image.pngimage.png

这里不同的质量会采用不同的算法来处理渲染图片,但效率和质量是成反比的,一般我们不做设置处理,考虑好图片的分辨率即可。
image.png

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

总结

到这里整个 Image 就聊完了,小小的一个 Image 就聊了 3 篇内容,里面涉及到很多基础的知识点,我们也没有特别展开的聊,就把一些常用的和优化的细节点聊了聊,就到这里,如果觉得对你有帮助,记得关注我哦

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

  • 此文章已收录到下面👇 的专栏,可以直接关注
  • 更多文章继续阅读|系列文章持续更新

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