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:这个参数子控件的变化效果。

相关推荐
float_六七1 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
Tim风声(网络工程师)1 小时前
不同射频对应不同mac地址(查找无线用户连接AP信息)
服务器·网络·tcp/ip·智能路由器·无线ap
能摆一天是一天2 小时前
JAVA stream().flatMap()
java·windows
颜如玉3 小时前
🤲🏻🤲🏻🤲🏻临时重定向一定要能重定向🤲🏻🤲🏻🤲🏻
java·http·源码
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
星空寻流年5 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式
鳄鱼杆5 小时前
服务器 | Docker应用开发与部署的实践以及阿里云镜像加速配置
服务器·阿里云·docker
羚羊角uou5 小时前
【Linux】命名管道
linux·运维·服务器
gb42152875 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
曾经的三心草6 小时前
Python2-工具安装使用-anaconda-jupyter-PyCharm-Matplotlib
android·java·服务器