Flutter路由动画Hero函数的使用

sun_weitao2025-01-12 19:18

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