像社交媒体这样的 Flutter 应用程序

Question

因此，我正在使用 flutter 和 firebase 编写一个应用程序，用户可以在其中上传带有标题的图像，这些图像以唯一的图像名称存储在 firebase 存储中，该图像名称用于保存上传者和上传者的数据。标题存入数据库。现在在主页上，显示了所有上传的图像，以及标题和用户名。 我面临的问题是，当我向下滚动时，下面的图片会被一张一张地加载。但是当我再次向上滚动时，图像必须再次加载。有什么办法可以避免这种情况吗？

我使用了 SingleChildScrollview 小部件

Answer 1

您可以使用，

fast_cached_network_image: ^1.2.0

，包来缓存您的图像。

这样，在从 F.Storage 获取图像之前，如果该包已存在于本地存储中，则该包将会（缓存）。如果是，它会从本地存储中显示它，并且不会再次获取图像。这也将减少带宽费用。

您可以在这里查看文档（简单直接）： https://pub.dev/packages/fast_cached_network_image

代码实施：

SizedBox(
        height: 150,
        width: 150,
        child: FastCachedImage(
          url: url1,
          fit: BoxFit.cover,
          fadeInDuration: const Duration(seconds: 1),
          errorBuilder: (context, exception, stacktrace) {
            return Text(stacktrace.toString());
          },
          loadingBuilder: (context, progress) {
            debugPrint(
                'Progress: ${progress.isDownloading} ${progress.downloadedBytes} / ${progress.totalBytes}');
            return Container(
              color: Colors.yellow,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  if (progress.isDownloading && progress.totalBytes != null)
                    Text(
                        '${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb',
                        style: const TextStyle(color: Colors.red)),
                  SizedBox(
                      width: 120,
                      height: 120,
                      child: CircularProgressIndicator(
                          color: Colors.red,
                          value: progress.progressPercentage.value)),
                ],
              ),
            );
          },
        ),
      ),