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

相关推荐
长风破浪会有时呀5 分钟前
记一次接口优化历程 CountDownLatch
java
宇钶宇夕17 分钟前
S7-200 SMART CPU 密码清除全指南:从已知密码到忘记密码的解决方法
运维·服务器·数据库·程序人生·自动化
思序 LogicFlow25 分钟前
关于在Linux上部署 SecretFlow --- P2P部署模式
linux·服务器
云朵大王30 分钟前
SQL 视图与事务知识点详解及练习题
java·大数据·数据库
我爱Jack1 小时前
深入解析 LinkedList
java·开发语言
YC运维2 小时前
网络配置综合实验全攻略(对之前学习的总结)
linux·服务器·网络
27669582922 小时前
tiktok 弹幕 逆向分析
java·python·tiktok·tiktok弹幕·tiktok弹幕逆向分析·a-bogus·x-gnarly
用户40315986396632 小时前
多窗口事件分发系统
java·算法
用户40315986396632 小时前
ARP 缓存与报文转发模拟
java·算法
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter