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

【问题标题】：Flutter. How to open a specific picture from image grid?扑。如何从图像网格中打开特定图片？
【发布时间】：2021-01-29 19:58:34
【问题描述】：

我有一个图像网格“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(),
                                  shrinkWrap: true,
                                  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,
                              ),
                            ),
                          ),
                        );
                      
                    },
                  ),

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

【问题讨论】：

嘿，如果是的话，您是否让这个工作正常，我可以看看您的代码示例吗？

标签： flutter grid staggered-gridview

【解决方案1】：

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

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

【讨论】：