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

Posted 2023-02-23

【中文标题】在 Flutter 中使用大量图像（缩略图）提高滚动性能

【英文标题】：Improving scroll performance using a lot of images (thumbnails) in Flutter

【发布时间】：2020-07-22 13:13:59

【问题描述】：

我一直在制作一个有水平列表列表的应用程序（类似于 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 中顺利执行，还是我在这里遗漏了什么？

【参考方案1】：

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

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

【讨论】：

我实际上看过那个演讲，但由于某种原因，天文台似乎对我不起作用（github.com/dart-lang/sdk/issues/41257），无论如何我尝试了你所说的，它显着提高了性能，所以我我要接受。非常感谢！