Flutter路由动画Hero函数的使用

Hero用于实现两个页面切换的过渡效果

以下示例:展示的是HeroPage切换到Hero2Page过程中 图片平滑放大的过程

Hero函数有两个重要的参数

tag:标识两个路由切换的共享参数,因为是HeroPage到Hero2Page切换,这里指定tag是tag1

chlid: 指定路由切换时,需要产生动画效果的子控件,这里用的时Image,动态变化的属性是宽高。

Dart 复制代码
class HeroPage extends StatefulWidget {
  const HeroPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HeroState();
  }
}

class _HeroState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("HeroPage"),
      ),
      body: GestureDetector(
        child: const Center(
          child: Hero(tag: 'tag1', child: HeroImageWidget())
        ),
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (BuildContext context) {
            return const Hero2Page();
          }));
        },
      ),
    );
  }
}

class Hero2Page extends StatelessWidget {
  const Hero2Page({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Hero2Page"),
        ),
        body: Center(
          child: Hero(
              tag: 'tag1',
              child: HeroImageWidget(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
              )),
        ));
  }
}

写Hero切换效果存在一定的套路,比如说开始页面HeroPage指定为StatefulWeight, 页面中存在state的变动,然而目标路由没有关系StatelessWidget也可以。

Hero动画中重要是攻略child:这个参数子控件的变化效果。

相关推荐
ZERO_pan1 小时前
服务器装机遇到的问题
运维·服务器
l1t2 小时前
利用DeepSeek实现服务器客户端模式的DuckDB原型
服务器·c语言·数据库·人工智能·postgresql·协议·duckdb
杀气丶2 小时前
Linux下运行芙蕾雅天堂2【俄文简译L2FATER】
运维·服务器·天堂2·l2fater·l2fater.cn
喵手2 小时前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
再见晴天*_*3 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
hdsoft_huge6 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
Tisfy6 小时前
服务器 - 从一台服务器切换至另一台服务器(损失数十条访客记录)
运维·服务器
雨白7 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark7 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea
赛姐在努力.7 小时前
《IDEA 突然“三无”?三秒找回消失的绿色启动键、主菜单和项目树!》
java·intellij-idea