使用flutter怎么实现一个炫酷的list

这篇文章给大家介绍使用flutter怎么实现一个炫酷的list，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司-专业网站定制、快速模板网站建设、高性价比泰和网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式泰和网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖泰和地区。费用合理售后完善，十年实体公司更值得信赖。

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 {
 @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'),
 ),
)

关于使用flutter怎么实现一个炫酷的list就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享文章：使用flutter怎么实现一个炫酷的list
转载来于：http://cdxtjz.cn/article/iigdpd.html