跨页面,显示Widget动画

320 阅读1分钟

(一)页面条状过程中添加一个widget的动画

1,创建一个页面,页面显示一张图片,要用到Scaffold组件和Image组件,使用Image.network方法来显示一张图片,点击图片要跳转到第二个页面,给Image包裹一个GestureDetector组件,可以给Image,添加onTap事件,点击事件跳转到第二个页面,使用到Navigator组件

2,为了实现在跳转的过程中给一个widget添加动画,需要再给Image包裹一个Hero组件,由Hero组件来完成这个功能。Hero有两个必传的可选参数,tag和child,设置成常量,方便第二个页面使用

static const String uniqueTag = "hero_widget"; static const String url = "timgsa.baidu.com/timg?...";

3,创建第二个页面,使用了MaterialApp风格,除了根widget组件使用Scaffold,还可以使用Material组件 相同的逻辑,给Image显示相同的图片,给Image包裹Hero组件,在包裹GestureDetector,是为了点击返回到第一个页面。

4,跨页面动画widget已完成,下面是动画的效果