1、推薦商品類的編寫

這個類接收一個List參數，就是推薦商品的列表，這個列表是可以左右滾動的。

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

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

2、推薦標題內部方法的編寫

實際開發中，要盡量減少嵌套，我們需要把復雜的組件，單獨拿出一個方法進行編寫。這里就把商品推薦標題單獨拿出一個方法進行編寫。

/*推薦商品標題*/
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、推薦商品單獨項編寫

把推薦商品的每一個子項我們也分離出來。每一個子項都使用InkWell，這樣為以后的頁面導航作準備。里邊使用了Column，把內容分成三行。

先不充關于InkWel的使用

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

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

再回訪推薦商品的編寫

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、橫向列表組件的編寫

橫向列表組件也進行單獨編寫，以減少嵌套，這樣我們就把每一個重要的部分都進行了分離。

Widget?_recommedList(){

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

有了這三個基本組件，最后我們在build方法里進行組合，形成商品推薦區域。

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

5、整個組件的類代碼如下

商品推薦
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()
?????????],
???????),
????);
??}

推薦商品標題
??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、準備數據并進行調用

在 HomePage build 中繼續添加：

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

效果圖：

總結

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

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