15-Flutter移动电商实战-商品推荐区域制作
1、推荐商品类的编写
这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的。
/*商品推荐*/class Recommend extends StatelessWidget { final List recommendList;
Recommend({Key key, this.recommendList}) : super(key: key);}
2、推荐标题内部方法的编写
实际开发中,要尽量减少嵌套,我们需要把复杂的组件,单独拿出一个方法进行编写。这里就把商品推荐标题单独拿出一个方法进行编写。
/*推荐商品标题*/Widget _titleWidget(){ return Container( alignment: Alignment.centerLeft, padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0), decoration: BoxDecoration( color:Colors.white, border: Border( bottom: BorderSide(width:0.5,color:Colors.black12) ) ), child:Text( '商品推荐', style:TextStyle(color:Colors.pink) ) );}
3、推荐商品单独项编写
把推荐商品的每一个子项我们也分离出来。每一个子项都使用InkWell,这样为以后的页面导航作准备。里边使用了Column,把内容分成三行。
先不充关于InkWel的使用
InkWell有的叫溅墨效果,有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它的颜色和形状。
InkWell( borderRadius: BorderRadius.circular(8.0), /*圆角*/ splashColor: Colors.transparent, /*溅墨色(波纹色)*/ highlightColor: Colors.transparent, /*点击时的背景色(高亮色)*/ onTap: () {},/*点击事件*/ child: Container(),);
再回访推荐商品的编写
Widget _item(index){ return InkWell( onTap: (){}, child: Container( height: ScreenUtil().setHeight(330), width: ScreenUtil().setWidth(250), padding: EdgeInsets.all(8.0), decoration:BoxDecoration( color:Colors.white, border:Border( left: BorderSide(width:0.5,color:Colors.black12) ) ), child: Column( children: <Widget>[ Image.network(recommendList[index]['image']), Text('¥${recommendList[index]['mallPrice']}'), Text( '¥${recommendList[index]['price']}', style: TextStyle( decoration: TextDecoration.lineThrough, color:Colors.grey ), ) ], ), ), );}
4、横向列表组件的编写
横向列表组件也进行单独编写,以减少嵌套,这样我们就把每一个重要的部分都进行了分离。
Widget _recommedList(){
return Container( height: ScreenUtil().setHeight(330), child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: recommendList.length, itemBuilder: (context,index){ return _item(index); }, ), );}
有了这三个基本组件,最后我们在build方法里进行组合,形成商品推荐区域。
@overrideWidget build(BuildContext context) {return Container( height: ScreenUtil().setHeight(380), margin: EdgeInsets.only(top: 10.0), child: Column( children: <Widget>[ _titleWidget(), _recommedList() ], ),);}
5、整个组件的类代码如下
商品推荐class Recommend extends StatelessWidget { final List recommendList;
Recommend({Key key, this.recommendList}) : super(key: key);
@override Widget build(BuildContext context) { return Container( height: ScreenUtil().setHeight(380), margin: EdgeInsets.only(top: 10.0), child: Column( children: <Widget>[ _titleWidget(), _recommedList() ], ), ); }
推荐商品标题 Widget _titleWidget(){ return Container( alignment: Alignment.centerLeft, padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0), decoration: BoxDecoration( color:Colors.white, border: Border( bottom: BorderSide(width:0.5,color:Colors.black12) ) ), child:Text( '商品推荐', style:TextStyle(color:Colors.pink) ) ); }
Widget _recommedList(){
return Container( height: ScreenUtil().setHeight(330), child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: recommendList.length, itemBuilder: (context,index){ return _item(index); }, ), ); }
Widget _item(index){ return InkWell( onTap: (){}, child: Container( height: ScreenUtil().setHeight(330), width: ScreenUtil().setWidth(250), padding: EdgeInsets.all(8.0), decoration:BoxDecoration( color:Colors.white, border:Border( left: BorderSide(width:0.5,color:Colors.black12) ) ), child: Column( children: <Widget>[ Image.network(recommendList[index]['image']), Text('¥${recommendList[index]['mallPrice']}'), Text( '¥${recommendList[index]['price']}', style: TextStyle( decoration: TextDecoration.lineThrough, color:Colors.grey ), ) ], ), ), ); }}
6、准备数据并进行调用
在 HomePage build 中继续添加:
List<Map> recommendList = (data['data']['recommend'] as List).cast(); Recommend(recommendList:recommendList),
效果图:
15-Flutter移动电商实战-商品推荐区域制作相关推荐
- 微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
- 12-Flutter移动电商实战-首页导航区域编写
12-Flutter移动电商实战-首页导航区域编写 1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套 ...
- 03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
- Flutter移动电商实战 --(14)首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- 01-Flutter移动电商实战-项目学习记录
01-Flutter移动电商实战-项目学习记录 一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常 ...
- 微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
- 大型电商实战项目,助力2021年高薪
文章目录 序言 推荐背景 项目介绍 整体架构图形 热点技术栈 项目特点 适合人群 对比番外类似的项目 痛点和选择 序言 2021 新的一年开始,祝愿大家工作顺利,事事顺心.如果你有幸看到这一篇文章,请 ...
- 最新《Laravel5.4电商实战项目-联想商城》
Laravel5.4电商实战项目-联想商城 官方付费地址:http://edu.51cto.com/course/10500.html 课程目标 本课程学习的目标是利用laravel框架做出一个电商项 ...
- Mall电商实战项目专属学习路线,主流技术一网打尽!
之前经常有朋友问我,mall项目该如何学习,按照什么顺序学习?我一般都会把<mall学习教程>的目录发给他,希望他按照教程顺序学习.我一直认为基于项目实战的学习,可以更好的掌握技术.mal ...
最新文章
- 最优的去重处理——HashSet去重
- 为什么重新new两个线程线程号相同_C++ 20中的新线程(jthread)功能
- stm32跑python-STM32F4系列使用MicroPython开发
- python—web页面操作之3种等待方式
- 加密文件忘记密码怎么解密_MyBatis 配置文件 用户密码加密存储
- linux挑战:历史命令_博客挑战:分享您关于社区运作方式的知识
- myelclipse Servers视图报错
- Linux环境下安装单实例MySQL 5.7
- log功能ASP.NET MVC能实现
- canvas对象arcTo函数的使用-遁地龙卷风
- 正阅读微信小说分销系统-视频教程-4.数据统计 包含图文教程
- 浏览器cookie数量与大小限制
- Spring Boot - Mybatis 缓存
- 数据化运营之会员数据化运营
- Python 根据身份证号判断所属省份,生日与性别
- 包含WebRoot的Web工程在Eclipse中的搭建和配置
- gromacs 安装_Gromacs 4.0.3、4.5.5版安装方法
- WDM在不同Windows版本上的音频支持
- 可取性、适用性、可行性:内存计算技术的影响
- 2021重庆江北中学高考成绩查询,重庆市江北中学校2021年排名
热门文章
- [css] 在页面中的应该使用奇数还是偶数的字体?为什么呢?
- 前端学习(2864):简单秒杀系统学习之优化js
- 工作207:修改表头按钮样式
- 前端学习(2658):vue3优化
- “约见”面试官系列之常见面试题之第八十八篇之什么是vue生命周期(建议收藏)
- 前端学习(1758):前端调试值之快速以编辑状态查看一个站点的所有资源
- 前端学习(1535):单一页面的优势
- java学习(31):for循环
- jms mysql_JMS学习九(ActiveMQ的消息持久化到Mysql数据库)
- echarts使用大总结