天天看點

Flutter移動電商實戰-商品推薦區域制作

這個類接收一個List參數,就是推薦商品的清單,這個清單是可以左右滾動的。

實際開發中,要盡量減少嵌套,我們需要把複雜的元件,單獨拿出一個方法進行編寫。這裡就把商品推薦标題單獨拿出一個方法進行編寫。

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

InkWell有的叫濺墨效果,有的叫水波紋效果。使用場景是給一些無點選事件的部件添加點選事件時使用(也支援長按、輕按兩下等事件),同時你也可以去修改它的顔色和形狀。

再回訪推薦商品的編寫

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

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

在 HomePage build 中繼續添加:

效果圖:

Flutter移動電商實戰-商品推薦區域制作