在 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”之前会出现短暂的白色闪烁。

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

See attached GIF for a loose approximation.

Answer 1

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

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

将 gaplessPlayback 设置为 true 后，您的原始图像将一直保留，直到新图像完成加载并且 "white flash gap" 不会出现。

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

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

Preloading local image assets in Flutter

dart

flutter