Hero用于实现两个页面切换的过渡效果

以下示例：展示的是HeroPage切换到Hero2Page过程中 图片平滑放大的过程

Hero函数有两个重要的参数

tag：标识两个路由切换的共享参数，因为是HeroPage到Hero2Page切换，这里指定tag是tag1

chlid: 指定路由切换时，需要产生动画效果的子控件，这里用的时Image，动态变化的属性是宽高。

class HeroPage extends StatefulWidget {const HeroPage({super.key});@overrideState<StatefulWidget> createState() {return _HeroState();}
}class _HeroState extends State<HeroPage> {@overrideWidget 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});@overrideWidget 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：这个参数子控件的变化效果。