打开图片到全屏，如果点击 - flutter_html

Question

如果我的 HTML 中有图片，我无法在点击时全屏打开该图片。

如果点击图像，下面是 flutter_html 中可用的内置函数。

onImageTap: (url, context, attributes, element) => {
// code here
}

我们有什么办法可以做到这一点吗？

我尝试了以下解决方案，但没有用

onImageTap: (url, context, attributes, element) => {
 Scaffold(
      body: GestureDetector(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(image),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    )
}

Answer 1

好像需要Navigator.push()或者showDialog.
onImageTap 不会重建您的屏幕。

Answer 2

您必须使用 Navigator.push

将其作为新页面推送

onImageTap: (url, context, attributes, element) => {
   Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => FullScreenImageViewer(url)),
   );
}

这是您的无状态小部件：

class FullScreenImageViewer extends StatelessWidget {
  const FullScreenImageViewer(this.url,{Key? key}) : super(key: key);
  final String url;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(url),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

打开图片到全屏，如果点击 - flutter_html

Open image to full screen, if tapped - flutter_html

flutter

flutter-html