扑如何从图像网格中打开特定图片？

问题描述

我有一个图像网格“StaggeredImageGrid”，我想要的是当我点击其中一个图像时，该图像应该显示在屏幕顶部。换句话说，你们都知道 Instagram 帖子，对吧。当您转到您的个人资料页面并点击网格视图中的其中一张图片时，该图片就会在您的屏幕顶部弹出，您也可以上下滚动查看其他图片。

child: new StaggeredGridView.countBuilder(
                    physics: NeverScrollableScrollPhysics(),shrinkWrap: true,crossAxisCount: 4,mainAxisspacing: 3,crossAxisspacing: 3,staggeredTileBuilder: (int index) =>
                        new StaggeredTile.count(2,index.isEven ? 2 : 3),itemCount: _posts.length,itemBuilder: (BuildContext context,int index) {
                       
                        Post post = _posts[index];
                        List<PostView> postViews = [];
                        _posts.forEach((post) {
                          postViews.add(PostView(
                            currentUserId: widget.currentUserId,post: post,author: _profileUser,));
                        });
                        return GestureDetector(
                          onTap: () => Navigator.push(
                            context,MaterialPageRoute(
                              builder: (context) => SingleChildScrollView(
                                child: ListView.builder(
                                  padding: EdgeInsets.only(top: 0),physics: NeverScrollableScrollPhysics(),itemCount: postViews.length,itemBuilder:
                                      (BuildContext context,int index) {
                                    return Column(children: postViews);
                                  },),child: Container(
                            decoration: Boxdecoration(
                              color: Colors.transparent,borderRadius: BorderRadius.all(
                                Radius.circular(15),child: ClipRRect(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(7)),child: Image(
                                image:
                                    CachednetworkImageProvider(post.imageUrl),fit: BoxFit.cover,);
                      
                    },

当我点击其中一张图片时，我得到的是从头开始的图片列表，而不是那个确切的图片。

解决方法

尝试在按下网格图像时在您的第二页中实现 scroll_to_index 列表视图，当您按下图像时，将索引传递到第二页并在构建后跳转到该索引图像：

ListView(
  scrollDirection: scrollDirection,controller: controller,children: randomList.map<Widget>((data) {
    final index = data[0];
    final height = data[1];
    return AutoScrollTag(
      key: ValueKey(index),index: index,child: Text('index: $index,height: $height'),highlightColor: Colors.black.withOpacity(0.1),);
  }).toList(),)