Flutter Widget 之CachedNetworkImage

若说一图抵过千言万语，那用在您的应用程序中的一些好图绝对值得加载所需的成本。

但若没留意，用户每次开启应用时就付出一次代价，为避免此问题，可使用cached_network_image

首先在你的应用程序中找到那个得重复下载到令人厌烦的小部件Image.network

Image.network("http://my-image.jpg")

然后将其转换为CachedNetworkImage,大功告成

CachedNetworkImage(
    imageUrl: "http://my-image.jpg",
)

这样，您的Flutter应用将再次下载该图像并加以保存备用

好吧，也许没那么简单。CachedNetworkImage构造函数又很多自定义选项

使用placeholder占位符参数控制下载图像时的显示内容

CachedNetworkImage(
    imageUrl: "http://my-image.jpg",
    placeholder: (context, url) => Text('Loading $url'),
)

progressIndicatorBuilder这项参数所提供的更新，则是另一途径. 在取得最后所需的行为前还有许多其他参数可尝试

CachedNetworkImage(
    imageUrl: "http://my-image.jpg",
    progressIndicatorBuilder: (_, url, download) {
        if (download.progress != null) {
            final percent = download.progress! * 100;
            return Text('$percent% done loading');
        }
        return Text('Loaded $url');
    }
)

但你可能想知道,若我要尝试缓存BoxDecoratioon图像属性怎么办？那种NetworkImage对象并非小部件，而是一中图片来源.

CachedNetworkImage无法在该处充当占位符

Container(
    decoration: BoxDecoration(
        image: NetworkImage("https://my-image.jpg'),
    )
)

好在还有办法满足此目的，亦即CacheNetworkImageProvider

Container(
    decoration: BoxDecoration(
        image: CachedNetworkImageProvider(
            'https://my-image.jpg',
        )
    )
)

因此下次打算用图像省去长篇大论以便替用户减少资料传输量情,使用CachedNetworkImage

如果想了解有关CachedNetworkImage 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址