1、推薦商品類的編寫(xiě)

這個(gè)類接收一個(gè)List參數(shù)，就是推薦商品的列表，這個(gè)列表是可以左右滾動(dòng)的。

/*商品推薦*/
class?Recommend?extends?StatelessWidget?{
??final?List??recommendList;

??Recommend({Key?key,?this.recommendList})?:?super(key:?key);
}

2、推薦標(biāo)題內(nèi)部方法的編寫(xiě)

實(shí)際開(kāi)發(fā)中，要盡量減少嵌套，我們需要把復(fù)雜的組件，單獨(dú)拿出一個(gè)方法進(jìn)行編寫(xiě)。這里就把商品推薦標(biāo)題單獨(dú)拿出一個(gè)方法進(jìn)行編寫(xiě)。

/*推薦商品標(biāo)題*/
Widget?_titleWidget(){
?return?Container(
???alignment:?Alignment.centerLeft,
???padding:?EdgeInsets.fromLTRB(10.0,?2.0,?0,5.0),
???decoration:?BoxDecoration(
?????color:Colors.white,
?????border:?Border(
???????bottom:?BorderSide(width:0.5,color:Colors.black12)
?????)
???),
???child:Text(
?????'商品推薦',
?????style:TextStyle(color:Colors.pink)
?????)
?);
}

3、推薦商品單獨(dú)項(xiàng)編寫(xiě)

把推薦商品的每一個(gè)子項(xiàng)我們也分離出來(lái)。每一個(gè)子項(xiàng)都使用InkWell，這樣為以后的頁(yè)面導(dǎo)航作準(zhǔn)備。里邊使用了Column，把內(nèi)容分成三行。

先不充關(guān)于InkWel的使用

InkWell有的叫濺墨效果，有的叫水波紋效果。使用場(chǎng)景是給一些無(wú)點(diǎn)擊事件的部件添加點(diǎn)擊事件時(shí)使用（也支持長(zhǎng)按、雙擊等事件），同時(shí)你也可以去修改它的顏色和形狀。

InkWell(
??borderRadius:?BorderRadius.circular(8.0),?/*圓角*/
??splashColor:?Colors.transparent,?/*濺墨色（波紋色）*/
??highlightColor:?Colors.transparent,?/*點(diǎn)擊時(shí)的背景色（高亮色）*/
??onTap:?()?{},/*點(diǎn)擊事件*/
??child:?Container(),
);

再回訪推薦商品的編寫(xiě)

Widget?_item(index){
????return?InkWell(
??????onTap:?(){},
??????child:?Container(
????????height:?ScreenUtil().setHeight(330),
????????width:?ScreenUtil().setWidth(250),
????????padding:?EdgeInsets.all(8.0),
????????decoration:BoxDecoration(
??????????color:Colors.white,
??????????border:Border(
????????????left:?BorderSide(width:0.5,color:Colors.black12)
??????????)
????????),
????????child:?Column(
??????????children:?<Widget>[
????????????Image.network(recommendList[index]['image']),
????????????Text('￥${recommendList[index]['mallPrice']}'),
????????????Text(
??????????????'￥${recommendList[index]['price']}',
??????????????style:?TextStyle(
????????????????decoration:?TextDecoration.lineThrough,
????????????????color:Colors.grey
??????????????),
????????????)
??????????],
????????),
??????),
????);
}

4、橫向列表組件的編寫(xiě)

橫向列表組件也進(jìn)行單獨(dú)編寫(xiě)，以減少嵌套，這樣我們就把每一個(gè)重要的部分都進(jìn)行了分離。

Widget?_recommedList(){

??return?Container(
????height:?ScreenUtil().setHeight(330),
????child:?ListView.builder(
??????scrollDirection:?Axis.horizontal,
??????itemCount:?recommendList.length,
??????itemBuilder:?(context,index){
????????return?_item(index);
??????},
????),
??);
}

有了這三個(gè)基本組件，最后我們?cè)赽uild方法里進(jìn)行組合，形成商品推薦區(qū)域。

@override
Widget?build(BuildContext?context)?{
return?Container(
???height:?ScreenUtil().setHeight(380),
???margin:?EdgeInsets.only(top:?10.0),
???child:?Column(
?????children:?<Widget>[
???????_titleWidget(),
???????_recommedList()
?????],
???),
);
}

5、整個(gè)組件的類代碼如下

商品推薦
class?Recommend?extends?StatelessWidget?{
??final?List??recommendList;

??Recommend({Key?key,?this.recommendList})?:?super(key:?key);

??@override
??Widget?build(BuildContext?context)?{
????return?Container(
???????height:?ScreenUtil().setHeight(380),
???????margin:?EdgeInsets.only(top:?10.0),
???????child:?Column(
?????????children:?<Widget>[
???????????_titleWidget(),
???????????_recommedList()
?????????],
???????),
????);
??}

推薦商品標(biāo)題
??Widget?_titleWidget(){
?????return?Container(
???????alignment:?Alignment.centerLeft,
???????padding:?EdgeInsets.fromLTRB(10.0,?2.0,?0,5.0),
???????decoration:?BoxDecoration(
?????????color:Colors.white,
?????????border:?Border(
???????????bottom:?BorderSide(width:0.5,color:Colors.black12)
?????????)
???????),
???????child:Text(
?????????'商品推薦',
?????????style:TextStyle(color:Colors.pink)
?????????)
?????);
??}

??Widget?_recommedList(){

??????return?Container(
????????height:?ScreenUtil().setHeight(330),
????????child:?ListView.builder(
??????????scrollDirection:?Axis.horizontal,
??????????itemCount:?recommendList.length,
??????????itemBuilder:?(context,index){
????????????return?_item(index);
??????????},
????????),
??????);
??}

??Widget?_item(index){
????return?InkWell(
??????onTap:?(){},
??????child:?Container(
????????height:?ScreenUtil().setHeight(330),
????????width:?ScreenUtil().setWidth(250),
????????padding:?EdgeInsets.all(8.0),
????????decoration:BoxDecoration(
??????????color:Colors.white,
??????????border:Border(
????????????left:?BorderSide(width:0.5,color:Colors.black12)
??????????)
????????),
????????child:?Column(
??????????children:?<Widget>[
????????????Image.network(recommendList[index]['image']),
????????????Text('￥${recommendList[index]['mallPrice']}'),
????????????Text(
??????????????'￥${recommendList[index]['price']}',
??????????????style:?TextStyle(
????????????????decoration:?TextDecoration.lineThrough,
????????????????color:Colors.grey
??????????????),
????????????)
??????????],
????????),
??????),
????);
??}
}

6、準(zhǔn)備數(shù)據(jù)并進(jìn)行調(diào)用

在 HomePage build 中繼續(xù)添加：

List<Map>?recommendList?=?(data['data']['recommend']?as?List).cast();?
?Recommend(recommendList:recommendList),????

效果圖：

總結(jié)

以上是生活随笔為你收集整理的15-Flutter移动电商实战-商品推荐区域制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。