利用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

总结

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

赞 (0)

相关推荐

  • android使用flutter的ListView实现滚动列表的示例代码

    现如今打开一个 App,比如头条.微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新.今天就用 Flutter 实现一下这种效果. 这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中.如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件. ListView 主要有以下几

  • Flutter中ListView 的使用示例

    Flutter中ListView 的使用示例

    这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析 网络请求 加载菊花 要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a

  • 利用flutter实现炫酷的list

    利用flutter实现炫酷的list

    前言 使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象中的强大.这篇文章介绍了怎么使用flutter来展示一个很漂亮的list,先看下效果图. 样式还是很漂亮的,下面我们一步一步完成这个小项目. 开发前准备 我们会用到加载网络图片FadeInImage这么个widget,需要一个loading的icon,所以需要在pubspec.yaml里配置下静态资源,只有配置过的静态资源才可以在项目中使用 assets: - assets/images/ 需要mock一些假

  • 利用Android实现比较炫酷的自定义View

    利用Android实现比较炫酷的自定义View

    目录 一.背景 1.1.控件效果 1.2.从功能上分析一下这个控件,大致有以下特点 1.3.从结构上分析 二. 背景圆实现 2.1.实现粒子运动 2.2.实现渐变色圆 2.3.展示背景圆的扇形区域 2.4.实现指针变色 2.5.实现背景圆颜色随扇形角度变化 三.跳动数字动画实现 3.1.属性动画+2个TextView实现数字上下切换动画 四.项目源码 总结 一.背景 1.1.控件效果 要实现的自定义控件效果大致如下,实现过程中用到了比较多的自定义View的API,觉得比较有代表性,就分享出来也当

  • 如何利用Flutter实现酷狗流畅Tabbar效果

    如何利用Flutter实现酷狗流畅Tabbar效果

    目录 前言 效果图 分析效果 开发思路 FlutterTabbar解析源码 实现步骤 业务使用 写在最后 实现源码 前言 在2021年末,酷狗发布了最新版11.0.0版本,这是一次重大的UI重构,更新完打开着实让我耳目一新.在原有风格上,整个App变得更加清爽,流畅.其中Tabbar的风格让我非常感兴趣,如果用Flutter来实现,或许是一个很有趣的事情. 效果图 分析效果 研究酷狗Tabbar的动画可以发现,默认状态下在当前Tab的中心处展示圆点,滑动时的效果拆分成两个以下部分: 从单个Tab

  • 利用JavaScript制作一个酷炫的3D图片演示

    利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

    Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

    本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

  • vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果 说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的 使用 npm npm install vue-canvas-co

  • 如何在CocosCreator里画个炫酷的雷达图

    如何在CocosCreator里画个炫酷的雷达图

    前言 雷达图(Radar Chart) 也称为网络图.星图或蜘蛛网图. 是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多元数据的图形方法. 适用于显示三个或更多的维度的变量. 雷达图常用于

  • PowerShell中调用WPF生成炫酷窗口实例

    PowerShell中调用WPF生成炫酷窗口实例

    怎样在PowerShell中调用WPF,你知道,我也知道:怎样在PowerShell中将很长的.NET类型名称缩短成别名,你知道,我也知道.但是怎样将这两个知识点融汇贯通,写出一个优雅的DEMO,并且让你一眼就能看出,这就是WPF,不是别的,也许你以前就知道,而我直到今天才知道,有种相见恨晚的感觉. 先看一下炫酷的效果吧! PowerShell之WPF炫酷 # Plik: 4_Demo_v3_Reflection.ps1 #requires -version 3 $Akceleratory =

  • jQuery实现炫酷的鼠标轨迹特效

    代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现炫酷的鼠标轨迹特效</title><base target="_blank" /> <script type="text/javascript"> window.onloa

  • JS+CSS3制作炫酷的弹窗效果

    JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

随机推荐