Flutter學習筆記(二)之佈局

內容包括:RowWidget橫向佈局、ColumnWidget縱向佈局、StackWidget層疊佈局、PositionedWidget層疊定位佈局、CardWidget卡片佈局。

RowWidget

在這裏插入圖片描述
由於使用的是不靈活佈局,右側還有空白區域。
在這裏插入圖片描述
使用靈活佈局:添加Expanded,將子元素添加到child中:
在這裏插入圖片描述
在這裏插入圖片描述
可以將靈活和不靈活搭配使用有的用Expanded有的不用:
在這裏插入圖片描述
在這裏插入圖片描述

ColumnWidget

column容器的大小由其中包含的最大元素決定。
在這裏插入圖片描述
在這裏插入圖片描述
代碼中註釋的那一行能讓column在上一級container的垂直中心顯示。
如果要使column在正中間顯示,將上述Column包在一層Center(child:(…))中即可。
靈活的使一部分在頂部顯示,一部分在底部顯示:

在這裏插入圖片描述
在這裏插入圖片描述

StackWidget-層疊佈局

層疊最少要有兩個屬性。
在這裏插入圖片描述
在這裏插入圖片描述
默認重疊時從左上方開始的,如果要更改重疊的位置:
在這裏插入圖片描述
第一個參數是橫向重疊位置,越接近1越靠右,是一個0~1之間的比例值;
第二個參數是縱向重疊位置,越接近1越靠下,是一個0~1之間的比例值。
在這裏插入圖片描述

PositionedWidget-層疊定位組件

當層疊組件大於等於三個時使用該佈局。
在這裏插入圖片描述
在這裏插入圖片描述

CardWidget-卡片佈局

在這裏插入圖片描述
在這裏插入圖片描述
使用分隔使間距更大。
在這裏插入圖片描述
在這裏插入圖片描述

發佈了35 篇原創文章 · 獲贊 27 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章