Carousel滑块缓存Flutter

Question

Stack Overflow 社区您好，

我想知道在 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包

希望对您有帮助。