在 Flutter 中预加载本地图片资源答案

【问题标题】：Preloading local image assets in Flutter在 Flutter 中预加载本地图片资源
【发布时间】：2017-01-05 00:08:10
【问题描述】：

我有一个图像资产列表，并且我在屏幕上有一个图像小部件。我使用一个按钮在它们之间循环，使用 setState()。


    const List<String> _photoData = const [
      "assets/generic-cover.jpg",
      "assets/generic-cover2.jpg",
      "assets/generic-cover3.jpg",
      "assets/generic-cover4.jpg",
    ];

    class _MyHomePageState extends State<MyHomePage> {

      int _coverPhoto = 0;

      void _switchCoverPhoto() {
        setState(() {
          _coverPhoto++;
          if (_coverPhoto == _photoData.length) {
             _coverPhoto = 0;
          }
        });
      }

      @override
      Widget build(BuildContext context) {

        return new Scaffold(
          body: new Stack(
            children: <Widget>[
              new Image.asset (
                _photoData[_coverPhoto],
                fit: ImageFit.cover,
                height: 600.0,
              ),
              new Positioned ( // photo toggle button
                child: new IconButton(
                  icon: new Icon (Icons.photo),
                  onPressed: _switchCoverPhoto,
                  color: Colors.white,
                ),
                top: 32.0,
                right: 32.0,
              ),
            ]
          )
        );
      }

第一张图片渲染得很好。但是，当我调用 _switchCoverPhoto() 时，在显示“assets/generic-cover2.jpg”之前会出现短暂的白色闪光。

这引出了一个简单的问题：有没有一种简单的方法可以将后续图像（或多个图像）预加载到内存中，这样就不会事先进行闪存？

See attached GIF for a loose approximation.

【问题讨论】：

标签： dart flutter

【解决方案1】：

确保您的图片将gaplessPlayback 设置为true。

这并不能解决预加载问题，但可以防止切换资源时图像闪烁为白色。

将 gaplessPlayback 设置为 true 时，您的原始图像将一直保留到新图像完成加载，并且不会出现“白色闪光间隙”。

var img = new Image.asset(
  _photoData[_coverPhoto],
  fit: ImageFit.cover,
  height: 600.0,
  gaplessPlayback: true,
);

【讨论】：