Flutter移动电商实战 --(17)首页_楼层区域的编写
flutter -- 实战 移动 编写 电商 17 区域
2023-09-11 14:15:29 时间
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), ], ) , );
效果图:
相关文章
- Flutter移动电商实战 --(53)购物车_商品列表UI框架布局
- Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏
- Flutter移动电商实战 --(45)详细页_说明区域UI编写
- Flutter移动电商实战 --(39)路由_Fluro的路由配置和静态化
- Flutter移动电商实战 --(24)Provide状态管理基础
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
- Flutter移动电商实战 --(29)列表页_商品列表数据模型建立
- Flutter移动电商实战 --(14)首页_拨打电话操作
- Flutter移动电商实战 --(11)首页_屏幕适配方案和制作
- Flutter移动电商实战 --(9)移动商城数据请求实战
- Flutter移动电商实战 --(8)dio基础_伪造请求头获取数据
- Flutter移动电商实战 --(6)dio基础_Get_Post请求和动态组件协作
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter学习笔记(三)-- 事件交互和State管理
- Flutter实战-flutter混合开发报错:Failed to apply plugin [class ‘FlutterPlugin‘]
- Flutter Web 应用程序的 URL 中删除前导`#`
- Flutter开发 -flutter百度地图接入指南,外加定位,反地理编码,这些功能组成一个类似饿了么的配送员配送界面,这些功能你心动么?
- Flutter开发 - flutter异常上报方案,sentry的用法