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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个简单的图像资产列表，并且在屏幕上有一个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”之前会有短暂的白色闪烁。

这就引出了一个简单的问题：是否有一种简单的方法可以将一个或多个后续图像预加载到内存中，从而使事先没有闪存？

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

回答：

确保已将图像gaplessPlayback设置true为。

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

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

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

以上是 在Flutter中预加载本地图像资产 的全部内容， 来源链接： utcz.com/qa/434039.html

回到顶部