Flutter移动电商实战 --（17）首页_楼层区域的编写
2024-08-31 22:08:56
1、楼层标题组件
该组件非常简单，只接收一个图片地址，然后显示即可：
class FloorTitle extends StatelessWidget {
final String picture_address;
FloorTitle({this.picture_address});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8.0),
child: Image.network(picture_address),
);
}
}
2、楼层商品组件的编写
在编写楼层商品组件时，我们要对它详细的拆分，我们把一个组件拆分成如下内部方法。
- goodsItem：每个商品的子项，也算是这个类的最小模块了。
- firstRow：前三个商品的组合，是一个Row组件。
- otherGoods：其它商品的组合，也是一个Row组件。
总后把这些组件通过Column合起来。总代码如下：
/*楼层商品组件*/
class FloorContent extends StatelessWidget {
final List floorGoodsList; FloorContent({Key key, this.floorGoodsList}) : super(key: key); @override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
_firstRow(),
_otherGoods()
],
),
);
} Widget _firstRow(){
return Row(
children: <Widget>[
_goodsItem(floorGoodsList[0]),
Column(
children: <Widget>[
_goodsItem(floorGoodsList[1]),
_goodsItem(floorGoodsList[2]),
],
)
],
);
} Widget _otherGoods(){
return Row(
children: <Widget>[
_goodsItem(floorGoodsList[3]),
_goodsItem(floorGoodsList[4]),
],
);
} Widget _goodsItem(Map goods){ return Container(
width:ScreenUtil().setWidth(375),
child: InkWell(
onTap:(){print('点击了楼层商品');},
child: Image.network(goods['image']),
),
);
} }
3、数据的准备
不多说了，一次性全部写出来。
String floor1Title =data['data']['floor1Pic']['PICTURE_ADDRESS'];/*楼层1的标题图片*/
String floor2Title =data['data']['floor2Pic']['PICTURE_ADDRESS'];/*楼层1的标题图片*/
String floor3Title =data['data']['floor3Pic']['PICTURE_ADDRESS'];/*楼层1的标题图片*/
ist<Map> floor1 = (data['data']['floor1'] as List).cast(); /*楼层1商品和图片*/
List<Map> floor2 = (data['data']['floor2'] as List).cast(); /*楼层1商品和图片*/
List<Map> floor3 = (data['data']['floor3'] as List).cast(); /*楼层1商品和图片*/ return SingleChildScrollView(
child: Column(
children: <Widget>[
SwiperDiy(swiperDataList:swiperDataList ), /*页面顶部轮播组件*/
TopNavigator(navigatorList:navigatorList), /*导航组件 */
AdBanner(advertesPicture:advertesPicture),
LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone), /*广告组件*/
Recommend(recommendList:recommendList),
FloorTitle(picture_address:floor1Title),
FloorContent(floorGoodsList:floor1),
FloorTitle(picture_address:floor2Title),
FloorContent(floorGoodsList:floor2),
FloorTitle(picture_address:floor3Title),
FloorContent(floorGoodsList:floor3),
],
) ,
);
效果图：
最新文章
- Android之Json的学习
- [转载]Windows 7笔记本创建wifi热点供手机上网教程
- Golang 交叉编译
- UVaLive 6693 Flow Game (计算几何，线段相交)
- 新浪SAE数据库信息wordpress设置（用户&密码&主地址）
- js数组定义和获取其长度
- 用mac自带的safari浏览器下载excel文件后面自带了.exe后缀
- 局域网之php项目IP访问共享
- mysql备份，还原命令
- YII2 实现登录时候修改最新登录时间
- ADXL345加速度传感器驱动
- Linux进阶命令-sort、uniq、 cut、sed、grep、find、awk
- QtWebEngine加载资料缓慢
- Vsftp的PASV mode（被动模式传送)和Port模式解释
- Erlang标准数据结构的选择
- ZOJ 2480 - Simplest Task in Windows
- leetcode刷题11. 盛最多水的容器
- 通过容器提交镜像（docker commit）以及推送镜像（docker push）笔记
- linux freopen函数
- 解决SecureCRT/Xshell无法以root用户连接Ubuntu