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

【问题标题】：How to Navigate to next page without clearing current page data如何在不清除当前页面数据的情况下导航到下一页
【发布时间】：2020-06-14 16:09:31
【问题描述】：

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

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案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),
),

【讨论】：