这是我参与更文挑战的第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 🔥 最新版本
参考链接
关注专栏
- 此文章已收录到下面👇 的专栏,可以直接关注
- 更多文章继续阅读|系列文章持续更新
👏 欢迎点赞➕收藏➕关注,有任何问题随时在下面👇评论,我会第一时间回复哦