在内容列表页面,点按一个内容项目,会打开内容页面,从内容列表页面过渡到内容页面的时候,我们可以设置让内容图像使用 Hero 动画效果。
先处理一下内容列表项目,打开 post_list_item,找到 postListItemMedia ,剪切一下这个 PostMedia,这里可以先用一个 Hero 小部件,小部件的 child 就是刚才剪切的 PostMedia。然后设置一下这个 Hero 的 tag,注意这个标签必须是唯一的。这里我们可以把它设置成 post-media- ,后面再加上内容的 id,这里就是 item.id 。
然后打开 post_show_media,在内容页面的媒体小部件这里也得用一下 Hero 小部件。可以给这个 Container 添加一个包装,名字是 Hero,设置一下它的 tag,这个标签的值应该跟内容列表项目那里的 tag 是一样的,应该是 post-media- 后面加上内容的 id,这里就是 widget.post.id 。
测试
下面可以测试一下这个 Hero 动画的效果。回到内容列表页面,选择打开一个内容项目,注意内容媒体的变化,你会发现,它会从内容列表页面逐渐放大,显示在内容页面上。再回到内容列表页面,这个内容媒体会逐渐缩小,回到在内容列表的原来的位置上。