使用Flutter中的大量图像(缩略图)提高滚动性能

Question

我一直在制作一个应用程序，其中有一个水平列表(类似于Spotify(。在这些水平列表中是使用CachedNetworkImage小部件显示的缩略图。

我还没能让滚动性能变得流畅(每帧不到16毫秒，或者接近这一点(。

以下是一些示例代码(使用lorem-picsum获得随机生成的jpegs(：

Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.black,
body: new CustomScrollbar(
child: new ListView.builder(
controller: _scrollController,
itemCount: 30,
itemBuilder: (context, index){
return new Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: new Container(
width: double.infinity,
height: 100.0,
child: new ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 20,
itemBuilder: (context, innerIndex){
return new Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: new Container(
height: 100.0,
width: 100.0,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 1.0),
borderRadius: BorderRadius.circular(10.0)
),
child: new ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: new CachedNetworkImage(
imageUrl: _thumbnailsByArtist[index.toString()][innerIndex],
),
),
),
);
}
),
),
);
}
),
)
);
}

实际上(尽管这在实际应用程序中会明显不同(，要显示的列表中有600个图像(30个水平列表，每个列表20个图像(。lorem picsum自动生成的jpeg为100x100。

这是不是太雄心勃勃了，以至于无法在Flutter中顺利表演，还是我在这里错过了什么？

Answer 1

我会看这篇关于优化Flutter团队的Flutter应用程序的演讲。从本质上讲，列表中显示的每个项目至少要创建15个新的小部件(const小部件应该被缓存(，因此这将是600*15=9000个小部件。

如果您想跳转到解决方案，请尝试将您的项提取到一个无状态小部件中，该小部件接受当前索引作为参数并呈现您的项。这应该有望加快速度。