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

效果图：