CachedNetworkImage() 需要很多时间

Question

我正在尝试创建一个 flutter 应用程序。我使用带有图像的刷卡，但我面临一个问题，即第一个刷卡需要花费很多时间来显示 CircularProgressIndicator，直到它显示图像，但其他图像显示得更快。

这是我的代码：

Widget createSwipingImageCard(String imageUrl, Function(bool) handleSwipe) {
    return Container(
      color: AppColors.backgroundColor,
      width: SwipingCardsConstants.photoWidth,
      height: SwipingCardsConstants.photoHeight,
      child: Dismissible(
          key: Key(imageUrl), // Unique key for the card
          onDismissed: (direction) {
            if (direction == DismissDirection.endToStart) {
              // Swiped to the left (dislike)
              handleSwipe(false);
            } else if (direction == DismissDirection.startToEnd) {
              // Swiped to the right (like)
              handleSwipe(true);
            }
          },
          child: Card(
            elevation: 5,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
            ),
            child: CachedNetworkImage(
              imageUrl: imageUrl,
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                  ),
                ),
              ),
              placeholder: (context, url) => Center(
                child: CircularProgressIndicator(
                  color: ButtonConstants.primaryButtonColor,
                ),
              ),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          )),
    );
  }

这是我使用它的构建函数：

@override
  Widget build(BuildContext context) {
    return appLib.createPage(
        context,
        Center(
            child: FutureBuilder<void>(
                future: myFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return SizedBox(
                      width: 200,
                      child: Center(
                        child: appLib.insertPhoto(
                            path:
                                "/Users/admin/Desktop/Development/wonder_wrap/images/logo.png"),
                      ),
                    );
                  } else if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  } else {
                    return Center(
                        child: Stack(
                      children: [
                        for (int i = stackIndex; i < questionsList.length; i++)
                          IgnorePointer(
                            ignoring: i != stackIndex,
                            child: Opacity(
                              opacity: i == stackIndex ? 1.0 : 0.0,
                              child: SizedBox(
                                width: 300,
                                height: 600,
                                child: appLib.createSwipingImageCard(
                                  questionsList[i]['image'],
                                  handleSwipe,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));
                  }
                })));
  }

这是为什么呢？我该如何解决这个问题？

Answer 1

首先，你不应该使用函数，原因。您应该为从方法 createSwipingImageCard(...) 返回的小部件制作单独的小部件。 其次，有人怀疑第一次在你的“我的未来”中发生了一些需要很长时间的事情：

child: FutureBuilder<void>(
                future: myFuture,
    ...

但是您在这里没有使用快照数据中的任何内容：

return Center(
                        child: Stack(
                      children: [
                        for (int i = stackIndex; i < questionsList.length; i++)
                          IgnorePointer(
                            ignoring: i != stackIndex,
                            child: Opacity(
                              opacity: i == stackIndex ? 1.0 : 0.0,
                              child: SizedBox(
                                width: 300,
                                height: 600,
                                child: appLib.createSwipingImageCard(
                                  questionsList[i]['image'],
                                  handleSwipe,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));