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

效果圖：

總結

以上是生活随笔為你收集整理的17-Flutter移动电商实战-首页_楼层区域的编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。