Flutter實戰視頻-移動電商-30.列表頁_商品列表UI界面佈局

30.列表頁_商品列表UI界面佈局

小程序裏面的佈局方式

 

 

小程序的圖片上這裏使用的是warp佈局，由於首頁裏面火爆專區，已經用過了warp來佈局了。

因此這裏咱們沒有必要再講一遍，這裏咱們使用ListView，咱們把它佈局成下圖這種形式：

咱們拆的散一點，用內部方法的形式，咱們把圖片和名稱分別拆成單獨的方法去實現，而後在組合成一個子項賦值給ListView

 

開始寫內部方法

 

圖片widget

若是圖片很大的話，咱們須要設定一個限制,這個時候就體現出來這個外層套一個Container的好處。很容易給外層這個Container加上限制

商品名稱widget

仍是用內部方法的形式

文字最多顯示2行，若是超出了兩行就顯示省略號

 

這種文字比較多的就顯示2行

咱們還要設置文字越界的問題，這行咱們設置的最多顯示兩行和超出顯示省略號纔會起做用，而後再設置padding 左側的間距 不和左邊的圖片緊挨着。這裏都在外層套的Container上設置了。

價格的widget

價格是有一個商城價格，後面是市場價格，這裏就採用Row的形式

 

咱們須要給這個組件加上margin和上面的標題 有間距

 

組合起來各個widget

由於要增長點擊事件，點擊後要跳轉到詳情頁面，因此咱們最外層返回的widget是InkWell

先橫向佈局，再列布局，先用Row左右分開，而後右邊是上下分開用Column

這樣就造成了咱們的子項

加一些修飾的東西，例如每一項的下面有下劃線，上下的邊距。咱們在Container裏面作這些事

decoration：主要作的是背景和下面的邊框線

到build方法裏組件咱們的ListView.咱們當前build方法如今還只是一個ListView

如今來組件咱們的ListView，最好設置寬和高，不然就會報溢出的錯誤

寬：750-180=570

高：拿不許，就隨便給個1000吧

這裏咱們仍是用動態構造方法的ListView也就是。ListView.builder()

 

 

 

報錯：沒法啓動AVD模擬器

0:44    IDE and Plugin Updates: The following plugin is ready to update: Flutter

0:44    IDE and Plugin Updates: The following components are ready to update: Android Emulator, Google APIs Intel x86 Atom System Image

 

Warning: SetProcessDpiAwareness(2) failed: COM error 0xffffffff80070005  (Unknown error 0x0ffffffff80070005), using 2 ((null):0, (null))
INFO: QtLogger.cpp:66: Warning: SetProcessDpiAwareness(2) failed: COM error 0xffffffff80070005  (Unknown error 0x0ffffffff80070005), using 2 ((null):0, (null))

 

 

0:55    IDE and Plugin Updates: The following plugin is ready to update: Flutter

0:55    IDE and Plugin Updates: The following components are ready to update: Android Emulator, Google APIs Intel x86 Atom System Image

 

點擊升級flutter

升級Android Emulator

 

 

升級完avd模擬器能夠正常顯示了了 臥槽。。。。。。。

正常顯示的樣子

 

效果的展現：

效果又出來了 可是又溢出叻了。

 

 

代碼修復一個地方

超出顯示省略的地方，原來寫錯了，寫成分割了。

 解決溢出的問題

改爲974高度基本山差很少