如何在点击 gridView tile 时显示图像的原始大小

Question

gridview 具有带图像的图块：cachedNetworkImage(widget.post.mediaUrl >> 此代码工作正常
点击图块时，我想显示图块的原始大小或更大的图像，因为图像在 gridview 中排列并且很小。
为了测试，我添加了 onTap() 并返回了带有测试图像的脚手架，但它在点击时什么也没做（打印第 19 行除外）。

问题：

我需要什么才能显示实际的 post 图片？
不确定为什么点击时不返回脚手架？

        class _PostTileState extends State<PostTile> {
          @override
          Widget build(BuildContext context) {
            return GestureDetector(
              child: cachedNetworkImage(widget.post.mediaUrl),
              onTap: () {
                print("line19");
                return Scaffold(
                    body: GestureDetector(
                  child: Container(
                    child: Hero(
                      tag: 'imageHero',
                      child: Image.network(
                        'https://picsum.photos/250?image=9',
                      ),
                    ),
                  ),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ));
              },
            );
          }

Answer 1

您可以复制粘贴运行下面的完整代码
在你的情况下，你可以使用全屏对话框
代码片段

return GestureDetector(
      child: Image.network(widget.mediaUrl),
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                fullscreenDialog: true,
                builder: (BuildContext context) {
                  return Scaffold(
                    body: GestureDetector(
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        width: MediaQuery.of(context).size.width,
                        child: Hero(
                          tag: 'imageHero',
                          child: Image.network(
                            widget.mediaUrl,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  );
                }));
      },
    );

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, //横轴三个子widget
              childAspectRatio: 1.0 //宽高比为1时，子widget
              ),
          children: <Widget>[
            PostTile('https://picsum.photos/250?image=9'),
            PostTile('https://picsum.photos/250?image=10'),
            PostTile('https://picsum.photos/250?image=11'),
            PostTile('https://picsum.photos/250?image=12'),
          ]),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class PostTile extends StatefulWidget {
  String mediaUrl;
  PostTile(this.mediaUrl);

  @override
  _PostTileState createState() => _PostTileState();
}

class _PostTileState extends State<PostTile> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Image.network(widget.mediaUrl),
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                fullscreenDialog: true,
                builder: (BuildContext context) {
                  return Scaffold(
                    body: GestureDetector(
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        width: MediaQuery.of(context).size.width,
                        child: Hero(
                          tag: 'imageHero',
                          child: Image.network(
                            widget.mediaUrl,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  );
                }));
      },
    );
  }
}

如何在点击 gridView tile 时显示图像的原始大小

how to show original size of an image on tapping on gridView tile

gridview

image

dart

flutter