我在做一个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,
),
),
),
),
],
));
}
})));
}
为什么会这样?我该怎么解决这个问题呢?
1条答案
按热度按时间de90aj5v1#
首先,你不应该使用函数reasons。你应该为方法createSwipingImageCard(...)返回的小部件创建单独的小部件。第二,怀疑第一次在你的“我的未来”中发生了一些长时间的事情:
但是在这里您不使用快照数据中的任何内容: