dart CachedNetworkImage()需要很长时间

yc0p9oo0  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(81)

我在做一个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),
            ),
          )),
    );
  }

下面是我使用的build函数:

@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,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));
                  }
                })));
  }

为什么会这样?我该怎么解决这个问题呢?

de90aj5v

de90aj5v1#

首先,你不应该使用函数reasons。你应该为方法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,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));

相关问题