performance - 在 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

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

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