利用flutter实现炫酷的list
前言
使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效果图。
样式还是很漂亮的,下面我们一步一步完成这个小项目。
开发前准备
我们会用到加载网络图片FadeInImage这么个widget,需要一个loading的icon,所以需要在pubspec.yaml里配置下静态资源,只有配置过的静态资源才可以在项目中使用
assets: - assets/images/
需要mock一些假数据和一些常用的常量,所以专门建了个constant.dart来管理
assets: - assets/images/
appBar部分
appBar需要透明的背景这样才能将后面的图片展示出来,看起来很像沉浸式。
需要将elevations设置为0,这样就可以取消安卓特有的阴影效果,下面是代码:
Scaffold( appBar: AppBar( backgroundColor: Colors.transparent, elevation: 0, title: Text( 'flutter awesome list', style: TextStyle( color: Colors.white, ), ), ), body: HomeBody(), );
Banner部分
我们需要使用Transform.translate()
这个weidget来将Banner部分向上移动,让appBar全部展示在banner上面,这里给的offset为offset: Offset(0, -56)
,56为appBar的高度
下面的斜切造型需要使用ClipPath()
来完成,用法有点像canvas,代码如下:
class MyClipper extends CustomClipper<Path> { @override Path getClip(Size size) { Path p = Path(); p.lineTo(size.width, 0.0); p.lineTo(size.width, size.height / 4.75); p.lineTo(0.0, size.height / 3.75); p.close(); return p; } @override bool shouldReclip(CustomClipper oldClipper) { return true; } }
用户信息的展示用的widget是ListTile和CircleAvatar,用法也比较简单,我直接贴代码了:
ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(CONSTANT.userAvatar), ), title: Text( CONSTANT.userName, style: CONSTANT.defaultTextStyle, textScaleFactor: 1.5, ), subtitle: Text( CONSTANT.userProfile, style: CONSTANT.defaultTextStyle, ), )
列表展示部分
列表的展示使用的是ListView.builder()
,两个必传参数itemCount和itemBuilder,前者控制列表的数量,后者控制item的展示,因为item的样式还是比较多的,所以抽离成单独的StatelessWidget组件:AwesomeListItem
我们用InkWell组件将AwesomeListItem包裹,InkWell是flutter自带的组件,这个组件的特点是点击的时候带有水墨绽开的效果。点击item的时候,我们使用Navigator.push
跳转到详情页面
图片的展示,我们还是使用的FadeInImage,这种渐入效果的用户体验还是很不错的。然后再使用Hero()来包裹FadeInImage,这样能在页面跳转的时候提供图片之间的过渡动画,很是强大和炫酷
Hero( tag: index, child: FadeInImage( image: NetworkImage(data.image), fit: BoxFit.cover, placeholder: AssetImage('assets/images/loading.gif'), ), )
详情页面
最后就是详情页面的展示,这个页面并没有写什么样式,展示了从列表页跳转过来时,图片的过渡效果,有兴趣的同学可以丰富下页面的样式和内容
感兴趣的同学可以看下源码xch1029/awesomelist
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
相关文章
Android RecyclerView实现吸顶动态效果流程分析
RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法2022-12-12Android开发 -- 状态栏通知Notification、NotificationManager详解
本文主要讲解状态栏通知Notification、NotificationManager,小编觉得非常详细,给大家一个参考,希望对大家学习有所帮助。2016-06-06Android同步异步任务与多线程及Handler消息处理机制基础详细讲解
这篇文章主要介绍了Android同步异步任务与多线程及Handler消息处理机制基础,handler其实就是主线程在起了一个子线程,子线程运行并生成Message,Looper获取message并传递给Handler,Handler逐个获取子线程中的Message,感兴趣的小伙伴快跟随小编一起学习一下2022-11-11Android viewpager中动态添加view并实现伪无限循环的方法
这篇文章主要介绍了Android viewpager中动态添加view并实现伪无限循环的方法,涉及Android使用viewpager动态加载view及view无限循环显示的相关技巧,需要的朋友可以参考下2016-01-01Android studio 项目手动在本地磁盘中删除module后,残留文件夹无法删除的问题解决方法
这篇文章主要介绍了Android studio 项目手动在本地磁盘中删除module后,残留文件夹无法删除问题,本文给出了解决方法,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论