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

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

效果图：