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

╰半橙微兮° 2023-06-01 05:59 115阅读 0赞

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

效果图：

![1090399-20190811225238190-838286294.png][]

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

[1090399-20190811225238190-838286294.png]: /images/20230601/d259913c1d0a4aa9942e45988e1ea3a6.png