dart 在Flutter中预加载本Map像资源

7gcisfzg  于 5个月前  发布在  Flutter
关注(0)|答案(1)|浏览(62)

我有一个图像资产列表,我有一个Image小部件,我使用一个按钮来循环它们,使用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.

kulphzqa

kulphzqa1#

请确保您已将gaplessPlayback设置为true
这不会解决预加载的问题,但它会防止切换资产时图像 Flink 为白色。
当gaplessPlayback设置为true时,原始图像将保留,直到新图像完成加载,并且不会出现“白色闪光间隙”。

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

字符串

相关问题