在点击颤动时显示全屏图像（英雄）

Posted 2023-02-23

【中文标题】在点击颤动时显示全屏图像（英雄）

【英文标题】：Show full screen image on tap flutter (Hero)

【发布时间】：2021-09-18 16:41:30

【问题描述】：

我有使用network to local file显示的图像

Hero(
                           tag: "customWidget",
                           child: Container(
                             width: context.screenWidth / 2,
                             height: context.screenHeight / 4,
                             child: NetworkToLocal(
                               mediaURL: element.payload.uri,
                               mediaType: 'image',
                             ),
                           ),
                         ),

我想添加功能，在点击图像后，我可以以全屏模式显示此图像。如何使用 hero 小部件？

在上面的截图中，添加时高亮元素发生错误

                       child: NetworkToLocal(
                            mediaURL: element.payload.uri,
                            mediaType: 'image',
                          ),

【参考方案1】：

你使用英雄动画

import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget 
@override
Widget build(BuildContext context) 
return MaterialApp(
  title: 'Transition Demo',
  home: MainScreen(),
 );



class MainScreen extends StatelessWidget 
@override
Widget build(BuildContext context) 
return Scaffold(
  appBar: AppBar(
    title: Text('Main Screen'),
  ),
  body: GestureDetector(
    onTap: () 
      Navigator.push(context, MaterialPageRoute(builder: (_) 
        return DetailScreen();
      ));
    ,
    child: Hero(
      tag: 'imageHero',
      child: Image.network(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
      ),
    ),
  ),
);



class DetailScreen extends StatelessWidget 
@override
Widget build(BuildContext context) 
return Scaffold(
  body: GestureDetector(
    onTap: () 
      Navigator.pop(context);
    ,
    child: Center(
      child: Hero(
        tag: 'imageHero',
        child: Image.network(
          'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
        ),
      ),
    ),
  ),
);

【讨论】：

您忘记在英雄小部件上添加一个键！）另外，请扩展您的答案，i.o 两个屏幕上的英雄动画。

@RavindraS.Patil 我试过上面的例子，它不适合我的情况。我无法在任何其他类中使用 URL。“mediaURL: element.payload.uri”，在上面的示例中，他们使用了网络图像小部件。

我想你不明白，它是如何工作的。您无法在屏幕之间共享已完成的小部件。英雄动画仅在具有在屏幕之间切换的标签的小部件上添加动画。所以一个屏幕上的英雄小部件不是另一个屏幕上的小部件！

如果你有一些缓存的图像，我认为从缓存中获取它并立即显示它对你来说不是问题。

尝试将元素声明为 var element ;或 var element = " ";