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

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), ], ) , );

效果图：

转载于:https://www.cnblogs.com/crazycode2/p/11312475.html

相关资源：flutter移动电商实战.txt