17-Flutter移动电商实战-首页

1、楼层标题组件

该组件非常简单，只接收一个图片地址，然后显示即可：

class FloorTitle extends StatelessWidget {final String picture_address;FloorTitle({this.picture_address});@overrideWidget 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);@overrideWidget 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),],
) ,
);

效果图：

17-Flutter移动电商实战-首页_楼层区域的编写相关推荐

11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移动电商实战-首页_屏幕适配方案和制作 1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理 ...
18-Flutter移动电商实战-首页_火爆专区商品接口制作
1.获取接口的方法在service/service_method.dart里制作方法.我们先不接收参数,先把接口调通. Future getHomePageBeloConten() async{tr ...
12-Flutter移动电商实战-首页导航区域编写
12-Flutter移动电商实战-首页导航区域编写 1.导航单元素的编写从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套 ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
Flutter移动电商实战 --（14）首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块这个小伙伴们一定轻车熟路了, ...
01-Flutter移动电商实战-项目学习记录
01-Flutter移动电商实战-项目学习记录一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常 ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
微信小程序电商实战—环境搭建篇
本篇文章已同步发布于个人博客 https://qiucode.cn/article/90 可体验秋码淘好货微信小程序哦! 1.开发工具下载可到微信公众号-小程序下载 https://mp.we ...
Flutter实战视频-移动电商-45.详细页_说明区域UI编写
45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件效果展示: 最终代码: import 'package:flutter/ ...

17-Flutter移动电商实战-首页_楼层区域的编写

17-Flutter移动电商实战-首页_楼层区域的编写相关推荐

最新文章

热门文章