欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

利用flutter实现炫酷的list

程序员文章站 2023-11-25 17:16:58
前言 使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效...

前言

使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效果图。

利用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'),
 ),
)

详情页面

最后就是详情页面的展示,这个页面并没有写什么样式,展示了从列表页跳转过来时,图片的过渡效果,有兴趣的同学可以丰富下页面的样式和内容

感兴趣的同学可以看下源码

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。