如何在不清除当前页面数据的情况下导航到下一页

Question

我在 Flutter 的网格视图中显示图像时遇到问题。

1(我正在从Firestore获取25张图像，但这些图像不是从上到下加载的。这些图像是异步加载的。我想从上到下逐个加载所有图像，因此，滚动时应加载屏幕上没有的其他图像。

2(当我点击任何图像时，它会被带到全屏页面。我使用navigator. push从一个页面导航到另一个页面。但是，当我再次在全屏页面中点击后退按钮时，所有图像都会从头开始加载。我希望不再加载所有图像。

这是加载图像的代码。

class CategoryGrid extends StatefulWidget {
@override
_CategoryGridState createState() =>
_CategoryGridState();
}
class _CategoryGridState extends State<CategoryGrid> {

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: StreamBuilder(
stream: Firestore.instance.collection(label).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.black54),
),
),
);
} else {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: 50.0,
margin: EdgeInsets.only(top: 45.0),
child: Text(
displayText,
style: GoogleFonts.poppins(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 25.0,
),
),
),
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.6,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
padding: EdgeInsets.all(10.0),
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot imgUrl =
snapshot.data.documents[index];
if (imgUrl == null) {
return CircularProgressIndicator();
} else {
return GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return FullScreenPage(
image: "${imgUrl['image']}");
}));
},
child: Container(
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
child: FadeInImage(
image: NetworkImage(
"${imgUrl['image']}",
),
fit: BoxFit.fill,
placeholder: AssetImage(
'images/Loadinghorizontal.jpg'),
),
),
),
);
}
},
),
],
),
),
);
}
},
),
);
}
}

这是点击时推送到另一个屏幕的代码

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black54,
body: SafeArea(
child: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Image.network(
image,
fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(),
);
},
),
),
Positioned(
top: 12.0,
left: 12.0,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
),
),
),
],
),
),
);

Answer 1

使用cached_network_image包，它是完美的，因为它允许您将下载的图像放入手机的缓存中，因此这是您将如何做到的：

- 您将更新您的 pubspec.yaml 文件通过将其添加到依赖项cached_network_image: ^2.2.0+1你做flutter pub get，瞧

- 小例子

CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),