轮播滑块缓存

Question

我想知道在 flutter 中缓存轮播滑块的最佳方法是什么。目前我有一个 CarouselSlider，它可以打开一个窗口来查看整个图像。当我滑动时，它会加载下一张图像，当我向后滑动时，它会再次加载上一张图像。哪一个是最好的方法和最好的可用性？

这是我的代码：

ClipRRect(
  borderRadius: BorderRadius.circular(25),
  child: AspectRatio(
    aspectRatio: 16 / 9, // Set the aspect ratio to 16:9
    child: CarouselSlider(
      items: widget.recipe.urlImages.map((image) {
        return Builder(
          builder: (context) {
            return Wrap(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.circular(25),
                  ),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                          MaterialPageRoute(builder: (_) {
                        return Scaffold(
                          appBar: AppBar(
                            iconTheme:
                                const IconThemeData(
                                    color: FooderColors
                                        .fooderMainGreen),
                            backgroundColor: Colors.white,
                            elevation: 0.0,
                            centerTitle: true,
                            title: ImageIcon(
                              AssetImage(
                                  'assets/icons/logo_new.png'),
                              color: FooderColors
                                  .fooderMainGreen,
                              size: 50,
                            ),
                          ),
                          body: Center(
                            child: Hero(
                              tag: widget
                                      .recipe.recipeKey +
                                  image,
                              // Ensure unique tag per image
                              child: Image.network(image,
                                  fit: BoxFit.contain),
                            ),
                          ),
                        );
                      }));
                    },
                    child: ClipRRect(
                      child: Hero(
                        tag: widget.recipe.recipeKey +
                            image,
                        // Ensure unique tag per image
                        child: Image.network(
                          image,
                          fit: BoxFit.cover,
                          loadingBuilder:
                              (BuildContext context,
                                  Widget child,
                                  ImageChunkEvent?
                                      loadingProgress) {
                            if (loadingProgress == null)
                              return child;
                            return Center(
                              child:
                                  CircularProgressIndicator(
                                value: loadingProgress
                                            .expectedTotalBytes !=
                                        null
                                    ? loadingProgress
                                            .cumulativeBytesLoaded /
                                        loadingProgress
                                            .expectedTotalBytes!
                                    : null,
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        viewportFraction: 1.0,
        enlargeCenterPage: false,
      ),
    ),
  ),
),

Answer 1

要在设备本地缓存图像，您可以尝试

cached_network_image

包，例如：

CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
       errorWidget: (context, url, error) => Icon(Icons.error),
    ),

有关更多详细信息，请参阅cached_network_image包

希望对您有帮助。