Flutter Widget 之FadeInImage

如果你正显示从网路下载的图像，如果你可以在等待下载时插入展位图会很好吧？

幸运的是你可以使用FadeInImage做到这一点。

你可以使用应用程序assets目录中指定本地展位图像FadeInImage.assetNetwork

FadeInImage.assetNetwork(
    placeholder: 'assets/waiting.png',
    image: 'https://example.com/image.png'
)

也可以从内存中执行操作FadeInImage.memoryNetwork

FadeInImage.memoryNetwork(
    placeholder: localImageBytes,
    image: 'https://example.com/image.png'
)

设置高度和宽度参数以确定图像在加载之前和之后应占用的空间大小

FadeInImage.memoryNetwork(
    height: 300.0,
    placeholder: localImageBytes,
    image: 'https://example.com/image.png'
)

使用FadeInDuration参数指定动画应该用多长时间

FadeInImage.assetNetwork(
    fadeInDuration: const Duration(second: 1),
    placeholder: 'wating.png',
    image: 'loaded.png',
)

设置FadeInCurve以指定Flutter应该替换占位符图像的动画方式

FadeInImage.assetNetwork(
    fadeInCurve: Curves.bounceIn,
    placeholder: 'wating.png',
    image: 'loaded.png', 
)

如果你只想让占位符成为透明图像，请查看transparent_image工具包

import 'package:transparent_image/transparent_image.dart'
...
FadeInImage.memoryNetwork(
    placeholder: kTransparentImage,
    Image: 'finalImage.png',
)

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

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