我有一个简单的图像资产列表,并且在屏幕上有一个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
这不能解决预加载问题,但是可以防止在切换资产时图像闪烁为白色。
将gaplessPlayback设置为true时,原始图像将一直保留到新图像完成加载为止,并且不会出现“白色闪光间隙”。
var img = new Image.asset( _photoData[_coverPhoto], fit: ImageFit.cover, height: 600.0, gaplessPlayback: true, );