我使用FutureBuilder
将相册缩略图加载到ListTile
中,如下所示:
ListTile _albumTile(Album album, BuildContext context) {
return ListTile(
leading: FutureBuilder<Uint8List>(
future: AndroidContentResolver.instance.loadThumbnail(
uri: album.thumbnailUri,
width: 56,
height: 56,
),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Image.memory(snapshot.data!);
} else {
return const FittedBox(
fit: BoxFit.contain, child: Icon(Icons.album, size: 56));
}
}),
title: Text(album.album),
subtitle: Text(album.artist),
);
}
但是,随着图像加载,占位符图标将替换为空白图像,然后替换为最终缩略图.空白图像的宽度错误,导致ListTile
个标题和副标题四处 skip ,导致闪烁.
以下屏幕截图序列显示了三个连续的帧:
- 图像占位符.
- 一些期货交易已经完成,并且正在显示缩略图.其他瓷砖有一个空白图像(文本跳到左侧).
- 所有的future 都已经完成.
即使我修正了文本的 skip ——通过为图像指定fit: BoxFit.contain, width: 56, height: 56
——在缩略图出现之前,我仍然会看到一道白色的闪光.
我做错了什么?