Flutter 利用 Hero 动效实现列表详情页的无缝切换

前言

介绍了几篇 Hero 动画，我们来一个 Hero 动画应用案例。在一些应用中，列表的元素和详情的内容是一致的，这个时候利用 Hero 动画切换到详情会感觉无缝过渡，用户体验会更好。例如本篇我们要实现下面的效果：

思路

上面的效果是列表和详情共用了头像和头像的背景色。二者的组合是一个 Stack 组件，因此可以使用 Hero 组件完成。然后是 Hero 组件的移动，我们先做了水平移动，再做垂直方向移动，这样过渡体验会更好，这种可以用我们自定义的 RectTween 完成。下面是我们的各个部分的实现过程。

列表元素

列表元素我们定义一个 HeroListItem 类，整个列表元素需要点击进入详情，使用 GestureDetector 包裹。然后使用 Row 组件完成横向布局，而头像部分使用的是 Stack 组件。HeroListItem 的 build 方法如下：

Widget build(BuildContext context) {return GestureDetector(child: Contai

Flutter 利用 Hero 动效实现列表详情页的无缝切换相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换
jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换 1.可左右切换 2.可点击缩略图显示大图 3.缩略图多张滚动效果直接贴代码 <div class="mod18" ...
收藏不迷路 —— Flutter 转场动效大合集
前言动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,Flutter 提供了 Transition 系列的动画组件,可以让场景转换动画变得更加简单.本篇为你整理了常用的 T ...
html列表详情页,如何区分一个页面是列表页还是详情页
解析页面是做爬虫的过程中的重要环节,而且如果站点多了,解析也会变得非常复杂,所以智能化解析就可能是一个不错的解决方案.如果我们能够容忍一定的错误率,那么我们可以利用智能化解析算法帮我们提取一些内容,简 ...
Flutter键盘与同区域面板（如表情）无缝切换切换
很久之前在Android的Native开发过聊天类APP,有过接触的同学都会碰到一个绕不过的问题: 在下面几种场景中会出现一些"体验问题": 1.键盘->表情面板 2.表情面 ...
淘宝宝贝详情页模板,自动生成宝贝描述模板,淘宝详情页一键生成,切换
电子商务部门淘宝专卖店,每来一件衣服,都要人工的制作一个"宝贝说明"内页,往往每次上货一次会上几十几百件衣服,每件衣服都要做一个内页,工作量非常的巨大,而且极其容易出错,可维护性差 ...
App动效原理和应用设计
时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...
vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息二.实现 ...

Flutter 利用 Hero 动效实现列表详情页的无缝切换

前言

思路

列表元素

Flutter 利用 Hero 动效实现列表详情页的无缝切换相关推荐

最新文章

热门文章