dart - 在 Flutter 中预加载本地图片资源

Question

我有一个图像资产列表，并且屏幕上有一个图像小部件。我使用一个按钮在它们之间循环，使用 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”之前会出现短暂的白色闪光。

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

有关松散的近似值，请参见随附的 GIF。

Answer 1

确保您已gaplessPlayback设置true为您的图像。

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

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

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