10.首页楼层区域

作者: 冰点雨 | 来源:发表于2019-12-23 20:57 被阅读0次

10.首页楼层区域
商城操作说明(持续更新)
10.实现首页
综合实战
综合实战
电商案例首页布局楼层区
报警区域和探测区域的划分
首页header区域开发
产品设计、好奇心和有趣
day1

17073f882bf8094293cd821f85141c0.png

楼层标题组件（其实就是一个图片）

class FloorTitle extends StatelessWidget {
  final String picture_address; // 图片地址
  FloorTitle({Key key, this.picture_address}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Image.network(picture_address),
    );
  }
}

楼层商品组件
在编写楼层商品组件时，我们要对它详细的拆分，我们把一个组件拆分成如下内部方法。

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

}

数据赋值

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