dart - 如何防止小部件在 ListView 滚动时重新呈现

Question

我正在用带有图片和视频的帖子构建时间轴。

滚动列表时，图像和帖子本身会不断重新呈现。这会导致应用程序运行缓慢，因为必须重新计算尺寸 + 加载图像(第二次加载时从本地缓存)。

如何防止重建整个帖子小部件？

这是说明的问题。请注意滚动后的加载图标+淡入动画。

Demo of the problem here (GIF)

这是 ListView 的代码.

  ListView.builder(
      physics: const AlwaysScrollableScrollPhysics(),
      cacheExtent: 30,
      addAutomaticKeepAlives: true,
      padding: const EdgeInsets.all(0),
      itemCount: _posts.length,
      itemBuilder: (context, index) {
        var post = _posts[index];
        return OBPost(
          post,
          onPostDeleted: _onPostDeleted,
          key: Key(
            post.id.toString(),
          ),
        );
      })

我试过制作 OBPost小部件有状态并添加 AutomaticKeepAliveClientMixin和 wantKeepAlive => true但不会改变任何事情，总体上假设 Flutter 使用了 key防止项目重新呈现的属性。

更新:我还尝试在本地缓存帖子小部件 List<Widget> _postsWidgets变量，也不会改变任何东西。

Answer 1

您的列表看起来可以无限滚动，所以我不建议您缓存 OBPost 小部件。你如何处理图像缓存？您将它们保存到本地文件系统吗？如果是，那么我建议您也有图像小部件的内存缓存。

为 ListView 使用构建器背后的整个想法是不创建大量的列表项小部件，而是出于内存和性能原因保持合理的最小值。