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

相关推荐
代码的余温14 分钟前
5种高效解决Maven依赖冲突的方法
java·maven
慕y27417 分钟前
Java学习第十六部分——JUnit框架
java·开发语言·学习
paishishaba23 分钟前
Maven
java·maven
程序员老刘30 分钟前
Android 16开发者全解读
android·flutter·客户端
Jalor42 分钟前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
张人玉1 小时前
C# 常量与变量
java·算法·c#
Java技术小馆1 小时前
GitDiagram如何让你的GitHub项目可视化
java·后端·面试
tan77º1 小时前
【Linux网络编程】Socket - UDP
linux·服务器·网络·c++·udp
Codebee1 小时前
“自举开发“范式:OneCode如何用低代码重构自身工具链
java·人工智能·架构
程序无bug2 小时前
手写Spring框架
java·后端