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

相关推荐
柳鲲鹏几秒前
交叉编译:strip: Unable to recognise the format of the input file xx.c.o
linux·运维·服务器
一个小白开发3 分钟前
ip获取城市省份信息
java·tcp/ip
豆沙沙包?10 分钟前
2025年--Lc170--H289. 生命游戏(矩阵)--Java版
java·游戏·矩阵
冬夜戏雪16 分钟前
[学习日记][springboot 1-7][leetcode 6道]
java·开发语言·学习
讓丄帝愛伱17 分钟前
idea 中 mapper.xml黄线警告怎么去掉
java·intellij-idea
桦说编程28 分钟前
线程池拒绝策略避坑:谨慎使用抛弃策略,可能导致系统卡死
java·后端
奋斗的小monkey28 分钟前
Java微服务实战:从零搭建电商用户服务系统
java·spring boot·微服务·nacos·电商系统·redis缓存
Le1Yu28 分钟前
微服务拆分以及注册中心
linux·运维·服务器
菜鸟plus+30 分钟前
URL 设计
java
星秀日34 分钟前
框架--MyBatis
java·开发语言·mybatis