第二百七十回

文章目录

  • 1. 概念介绍
  • 2. 实现方法
    • 2.1 主要步骤
    • 2.1 注意事项
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"如何修改图片的透明度"相关的内容,本章回中将介绍如何加载网络图片.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在上一章回中介绍的内容与图片有关,本章回中仍然介绍图片相关的知识:加载网络图片。我们在这里说的网络图片表示图片存储于某个网站上,我们可以在浏览器中
输入存储图片的网站地址来查看图片。

2. 实现方法

2.1 主要步骤

加载网络图片的主要是步骤是使用network()方法,它是image类的静态方法,可以直接拿来使用。该方法提供了一些常用的属性,详细如下:

  • color属性:主要用来修改图片的颜色;
  • loadingBuilder属性: 主要用来控制图片从网络加载过程中显示的内容;
  • errorBuilder属性: 主要用来控制图片从网络加载失败后显示的内容;
    该方法还有一个没有命名的属性,该属性主要用来存放图片的网络地址,这个是必不可少的内容。

2.1 注意事项

在加载网络图片时需要处理加载过程和加载错误,加载错误时通过errorBuilder属性控制,该属性是方法类型,它会把错误的信息通过方法的参数传递出来,我们可以
依据错误信息做相关的处理。加载过程中通过loadingBuilder属性控制,该属性也是方法类型,它会把加载的进度和加载完后的图片通过参数传递出来,我们可以显示
图片加载的进度。稍后我们将通完示例代码来演示。

3. 示例代码

Image.network(imageUrl,
  scale: 1,
  repeat: ImageRepeat.noRepeat,
  color: iconColor,
  loadingBuilder: (context,widget,loadProgress) {
  debugPrint("loading img: $loadProgress");
  ///导入完成后这个值为Null,
  if(loadProgress == null) {
    return widget;
  }else {
    return const Icon(Icons.more_horiz,color: Colors.red,);
  },
  errorBuilder: (context,error,track) {
    return const Icon(Icons.done,color: Colors.white,);
  }
),

上面的示例代码中演示了如何使用Image的network()方法加载网络图片,同时处理了图片加载过程和加载错误的业务逻辑,不过我们处理的的比较简单,只是显示一个
加载中或者加载错误的图标。大家可以依据自身业务逻辑进行相关的处理。此外,代码中处理图片加载中的业务时可以通过loadProgress参数计算具体的加载进度,我
在这里就不计算了,大家可以自己动手去计算一下。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 加载网络图片使用Image组件的network()方法;
  • 加载图片时需要处理图片加载过程和加载错误的业务逻辑;
  • 加载过程的属性中可以获取到图片的加载进度;
    看官们,与"如何加载网络图片"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,前端)