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),
),

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

1 个答案: