在 Flutter 中使用大量图像（缩略图）提高滚动性能

Question

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

我还没有设法使滚动性能变得平滑（每帧少于 16 毫秒，或接近该值）。

这是一些示例代码（使用 lorem picsum 获取随机生成的 jpeg）：

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 个新小部件（应缓存常量小部件），因此这将是 600 * 15 = 9000 个小部件。

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