我有一个图像资产列表,我有一个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.
1条答案
按热度按时间kulphzqa1#
请确保您已将
gaplessPlayback
设置为true
。这不会解决预加载的问题,但它会防止切换资产时图像 Flink 为白色。
当gaplessPlayback设置为true时,原始图像将保留,直到新图像完成加载,并且不会出现“白色闪光间隙”。
字符串