Flutter中点击GridView图片跳转新页并放大图片需使用什么功能？

实现步骤 #

• 首先定义存储图片路径和对应描述的数据结构
• 新建图片详情页，用于接收传递的参数并展示内容
• 给GridView条目的GestureDetector补全点击跳转逻辑，将选中的图片数据传递到详情页

代码实现 #

1. 定义数据结构 #

将原来仅存储图片路径的images列表，替换为同时存储路径和描述的结构化数据：

// 图片信息数据类
class ImageItem {
  final String imagePath;
  final String description;

  ImageItem({required this.imagePath, required this.description});
}

// 替换原来的images列表
List<ImageItem> imageList = [
  ImageItem(imagePath: "assets/图片1路径.png", description: "这是第一张图片的描述内容"),
  ImageItem(imagePath: "assets/图片2路径.png", description: "这是第二张图片的描述内容"),
  // 其余图片按上述格式补全即可
];

2. 新建图片详情页 #

class ImageDetailPage extends StatelessWidget {
  // 接收传递过来的图片信息
  final ImageItem imageItem;
  const ImageDetailPage({super.key, required this.imageItem});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("图片详情")),
      body: Column(
        children: [
          Expanded(
            // 展示大图
            child: Image(
              image: AssetImage(imageItem.imagePath),
              fit: BoxFit.contain,
            ),
          ),
          // 展示描述信息
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              imageItem.description,
              style: const TextStyle(fontSize: 16),
            ),
          )
        ],
      ),
    );
  }
}

3. 修改原有GridView逻辑 #

GridView.count(
  crossAxisCount: 2,
  children: imageList
      .map((item) => Container(
            child: Container(
              margin: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(10)),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey[900],
                    borderRadius: BorderRadius.circular(10)),
                margin: const EdgeInsets.all(8),
                padding: const EdgeInsets.all(8),
                child: GestureDetector(
                  onTap: () {
                    // 补全跳转传参逻辑
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => ImageDetailPage(imageItem: item),
                      ),
                    );
                  },
                  child: Image(
                    image: AssetImage(item.imagePath),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
          ))
      .toList(),
  crossAxisSpacing: 8,
  mainAxisSpacing: 8,
  padding: const EdgeInsets.all(8),
),

内容的提问来源于stack exchange，提问作者Shayan Ali