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

时间:2017-01-05 00:08:11

标签: dart flutter

我有一个简单的图像资源列表,我在屏幕上有一个图像小部件。我使用一个按钮来循环使用它们,使用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()时,在&#34; assets / generic-cover2.jpg&#34;之前会有一个简短的白色闪光。得到显示。

这导致了一个简单的问题:是否有一种简单的方法可以将后续图像(或图像)预加载到内存中,以便事先没有闪存?

See attached GIF for a loose approximation.

1 个答案:

答案 0 :(得分:10)

确保为图片设置gaplessPlayback true

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

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

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