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),
],
) ,
);
效果图：
