Android利用Hero实现列表与详情页无缝切换动画
作者:岛上码农 发布时间:2023-07-22 08:04:39
前言
介绍了几篇 Hero
动画,我们来一个 Hero
动画应用案例。在一些应用中,列表的元素和详情的内容是一致的,这个时候利用 Hero
动画切换到详情会感觉无缝过渡,用户体验会更好。例如本篇我们要实现下面的效果:
Hero 应用:列表与详情切换
思路
上面的效果是列表和详情共用了头像和头像的背景色。二者的组合是一个 Stack
组件,因此可以使用 Hero
组件完成。然后是 Hero
组件的移动,我们先做了水平移动,再做垂直方向移动,这样过渡体验会更好,这种可以用我们自定义的 RectTween
完成。下面是我们的各个部分的实现过程。
列表元素
列表元素我们定义一个 HeroListItem
类,整个列表元素需要点击进入详情,使用 GestureDetector
包裹。然后使用 Row
组件完成横向布局,而头像部分使用的是 Stack
组件。HeroListItem
的 build
方法如下:
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
padding: EdgeInsets.fromLTRB(0, 10.0, 10.0, 10.0),
child: Row(
children: [
Hero(
tag: heroTag,
createRectTween: (begin, end) {
return ListToDetailRectTween(
begin: begin!,
end: end!,
);
},
child: ListImage(
assetImageName: assetImageName,
imageBgColor: imageBgColor,
),
),
SizedBox(
width: 10.0,
),
Expanded(
child: Text(
content,
style: TextStyle(
color: Colors.black87,
fontSize: 18.0,
),
maxLines: 2,
),
),
],
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
fullscreenDialog: true,
builder: (context) => ListDetail(
heroTag: heroTag,
imageBgColor: imageBgColor,
assetImageName: assetImageName,
),
),
);
},
);
}
头像这块因为涉及到背景的边框圆弧处理,单独抽出来一个 ListImage
组件。整个头像是一个 Stack 组件,然后底部的背景 Container
右边的圆弧是通过 BoxDecoration
完成的。后面的 OvalImage
是一个圆形图片包装类,其实就是拿 ClipOval
包裹住 Image
组件就可以了,这里就不贴代码了。
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 90.0,
width: 110,
decoration: BoxDecoration(
color: imageBgColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(45.0),
bottomRight: Radius.circular(45.0),
),
),
),
Positioned(
child: OvalImage(
assetImageName: assetImageName,
imageSize: 90.0,
),
left: 20.0,
top: 0.0,
)
],
);
}
列表这里的关键其实就是使用 Hero
将头像区域包裹,然后使用了 createRectTween
定义了 Hero
飞行路径。
详情页面
详情页面因为跳转过来是个全屏弹窗的方式,因此需要自己完成返回按钮的操作。实际上详情页顶部就是一个 Stack
组件,组件的背景色和图片和列表保持一样,再在 Stack
组件加上关闭按钮和详情标题即可。这里为了保持页面顶部覆盖状态栏,使用的是 CustomScrollView
实现 (关于 CustomScrollView
可以看这篇:Flutter 实现更有趣的页面滚动效果)。顶部的界面我们定义了一个 ListDetailHeader 组件,代码如下所示。
class ListDetailHeader extends StatelessWidget {
final heroTag;
final imageBgColor;
final assetImageName;
const ListDetailHeader({
Key? key,
required this.heroTag,
required this.imageBgColor,
required this.assetImageName,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Hero(
child: Stack(
children: [
Container(
height: 160.0,
width: double.infinity,
decoration: BoxDecoration(
color: imageBgColor,
),
),
Positioned(
child: Material(
child: IconButton(
icon: Icon(
Icons.close,
color: Colors.white,
),
onPressed: () {
Navigator.of(context).pop();
},
),
color: Colors.transparent,
),
left: 10.0,
top: 50.0,
height: 40.0,
),
Positioned(
child: OvalImage(
assetImageName: assetImageName,
imageSize: 90.0,
),
right: 20.0,
top: 50.0,
),
Positioned(
child: Material(
color: Colors.transparent,
child: Text(
'这是详情',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
maxLines: 1,
),
),
left: 20,
top: 100,
),
],
),
tag: heroTag,
createRectTween: (begin, end) {
return ListToDetailRectTween(
begin: begin!,
end: end!,
);
},
);
}
}
这里没什么特别的,但是一开始遇到了一个问题就是发现文本下面会有两条下划线,而且样式也不对。后来百度了一下,发现是因为使用 fullscreenDialog
的时候,实际上是使用的苹果风格的页面,要保持 Material
风格的话,需要使用 Scaffold
或者使用 Material
组件包裹。因此,在 Text
组件上一层加了一个 Material
组件。Material
组件本身的背景色是白色的,为了不影响组件的底色,需要设置它的背景色为transparent
。
不被 Material 包裹文本
这里的 Hero
组件的 tag
和 createRectTween
和列表保持一致即可,实际的 tag
可以使用列表元素的 id
来设置。
源码
完整源码已经上传至:动画相关代码,代码在 lib/hero/list_to_detail_hero.dart
中。
来源:https://mp.weixin.qq.com/s/InXTXh30YCcrLLdLgD2X5Q
猜你喜欢
- 本文参考于《深入理解Java虚拟机》内存分配与回收策略Java技术体系的自动内存管理,最根本的目标是自动化地解决两个问题:自动给对象分配内存
- 这里给大家带来的是动态webservice调用接口并读取解析返回结果的具体示例,非常的简单,注释也很详细,小伙伴们可以参考下。using S
- 前言我们之前学的单链表,默认只能从链表的头部遍历到链表的尾部,在实际中应用太少见,太局限;而双向链表,对于该链表中的任意节点,既可以通过该节
- 工作闲暇之余去逛了逛CodeProject,刚好现有项目主要用到就是winform,浏览了下照片,找到上周带着蛋挞打疫苗回家的照片,于是新生
- 本文实例讲述了C#实现带阴历显示的日期代码,分享给大家供大家参考。具体方法如下:这是一个用于酒店预定功能的带日期控件,类似去哪网酒店预定,由
- 1.选择一个WebService接口作测试假设 WebService url 为 http://ws.webxml.com.cn/WebSe
- 简介Java 在 1.5 引入了泛型机制,泛型本质是参数化类型,也就是说变量的类型是一个参数,在使用时再指定为具体类型。泛型可以用于类、接口
- 本文为大家分享了如何使用eclipse创建java项目,供大家参考,具体内容如下首先,打开Eclipse,在工具栏依次点击【File】>
- 部分情况下无法通过maven仓库直接下载需要的jar包,只能讲jar包下载至本地来使用,spring boot框架内通过maven加载第三方
- C++虚类相当于java中的抽象类,与接口的不同之处是:1.一个子类只能继承一个抽象类(虚类),但能实现多个接口2.一个抽象类可以有构造方法
- C#事件sender的小用法开WPF新坑了,看了WPF的炫酷界面,再看看winForm实在是有些惨不忍睹(逃)。后面会开始写一些短的学习笔记
- C#是一种编译型的语言,程序执行,首先要经过编译器编译,如何让C#像一种脚本一样,在要执行的时候,进行编译,这里,我们可以用Microsof
- 前言有时候可能会遇到需要批量修改文件格式的需求,但百度了很久都没有找到相关的应用什么的,于是学过两天 Android 的我想自己去弄一个 A
- 以下弹出框是框的实现,放入到SWT项目下就可运行。1.提示框MessageBox mb = new MessageBox(shell,SWT
- 基于C#的Aforge类调用简单示例,供大家参考,具体内容如下由题,本程序是使用Aforge类库调用摄像头的demo。功能:1.预览2.前后
- 什么是RecyclerView关于RecyclerView,是一个主要用于展示和回收View的有一个控件,在官用了一句话来概括Recycle
- 运行远程主机上的shell脚本下面的例子是教给大家如何通过java程序,运行远程主机上的shell脚本。(我讲的不是一个黑客学习教程,而是使
- 在Maven工程里运行Java main方法mvn compilemvn exec:java -Dexec.mainClass="
- 本文实例讲述了C#中Arraylist的sort函数用法。分享给大家供大家参考。具体如下:ArrayList的sort函数有几种比较常用的重
- 单例模式有一下特点:1、单例类只能有一个实例。2、单例类必须自己自己创建自己的唯一实例。3、单例类必须给所有其他对象提供这一实例。单例模式确