flutter的進階之路之頁面佈局

佈局及裝飾組件說明

組件名稱	中文釋義	說明
Align	對齊佈局	指定child的對齊方式
AspectRatio	調整寬高比	根據設置的寬高比調整child組件
BaseLine	基準線佈局	全部的child底部所在的同一水平線
Center	居中佈局	child處於水平和垂直方向的中間位置
Column	垂直佈局	對child在垂直方向進行排列
ConstrainedBox	限定寬高	限定child的最大值
Container	容器佈局	容器佈局是一個組合的Widget，包含定位和尺寸
FittedBox	縮放佈局	縮放以及位置調整
FractionallySizedBox	百分比佈局	根據現有空間按照百分比調整child的尺寸
GridView	網格佈局	對多行多列同時進行操做
IndexedStack	棧索引布局	IndexedStack繼承自Stack，顯示第index個child，其餘child是不可見的
LimitedBox	限定寬高佈局	對最大寬高進行限制
ListView	列表佈局	用列表方式進行佈局，如多項數據的場景
Offstage	開關佈局	控制是否顯示組件
OverflowBox	溢出父容器顯示	容許child超出父容器的範圍顯示
Padding	填充佈局	處理容器和chid之間的間距
Row	水平佈局	對child在水平方向進行排列
SizedBox	設置具體尺寸	用特定大小的盒子來限定child寬度和高度
Stack/Alignment	Alignment棧佈局	根據Alignment組件的屬性將child定位在Stack組件上
Stack/Positioned	Positioned棧佈局	根據Positioned組件的屬性將child定位在Stack組件上
Table	表格佈局	使用表格的行和列進行佈局
Transform	矩陣轉換	作矩陣變換，對child作平移、旋轉、縮放等操做
Wrap	按寬高自動換行	按寬度或高度，讓child自動換行佈局

基礎佈局處理

2.1 Container(容器佈局)

Container在Flutter裏使用很是多，是一個組合Widget，內部有繪製Widget、定位Widget和尺寸Widget。

2.2 Center(居中佈局)

居中佈局，子元素處於水平和垂直方向的中間。

2.3 Padding(填充佈局)

用於處理容器和子元素間的間距。

2.4 Align(對齊佈局)

將子組件按指定方式對齊，並根據子組件的大小調整本身的大小。

2.5 Row(水平佈局)

水平方向是主軸，垂直方向是交叉軸。

2.6 Column(垂直佈局)

垂直方向是主軸，水平方向是交叉軸。

2.7 FittedBox(縮放佈局)

FittedBox會在本身的尺寸範圍內縮放並調整child位置。 兩個重要屬性： fit：縮放方式。默認值是BoxFix.contain，即child在FittedBox範圍內，儘量大。contain是在保證child寬高比的前提下，儘量填滿。 alignment：對齊方式。默認值是Alignment.center，居中顯示child。

2.8 Stack/Alignment

Stack經常使用屬性

屬性名	類型	默認值	說明
alignment	AlignmentGeometry	Alignment.topLeft	對齊方式

對齊方式有如下幾種：

• bottomCenter 底部居中
• bottomLeft 底部居左
• bottomRight 底部居右
• center 正中
• centerLeft 中間居左
• centerRight 中間居右
• topCenter 頂部居中
• topLeft 頂部居左
• topRight 頂部居右

2.9 Stack/Positioned

Positioned組件用來定位的。Stack裏使用Positioned佈局主要是由於在Stack組件裏一般須要定位。

Positioned經常使用屬性

屬性名	類型	說明
top	double	子元素相對頂部邊界距離
bottom	double	子元素相對底部邊界距離
left	double	子元素相對左側邊界距離
right	double	子元素相對右側邊界距離

2.10 IndexedStack

繼承自Stack，用於顯示第index個child，其餘child不可見，因此它的尺寸與child中最大尺寸一致。

2.11 OverFlowBox

容許child超出父容器範圍顯示。 經常使用屬性

屬性名	類型	說明
alignment	AlignmentGeometry	對齊方式
minWidth	double	容許child最小寬度，若是child寬度小於該值，按照最小寬度顯示
maxWidth	double	容許child最大寬度，若是child寬度大於該值，按照最大寬度顯示
minHeight	double	容許child最小高度，若是child寬度小於該值，按照最小高度顯示
maxHeight	double	容許child最大高度，若是child寬度大於該值，按照最大高度顯示

寬高尺寸處理

3.1 SizedBox

特定大小的盒子，強制child有特定的寬度和高度。若是寬度或高度爲null，該組件會調整自身大小以匹配child的尺寸。

3.2 ConstrainedBox

用於限定child的最大、最小寬高。若是child爲null，會盡量縮小尺寸。 經常使用屬性

屬性名	類型	說明
constraints	BoxConstraints	child的限制條件，限制最大、最小寬高
child	Widget	子元素組件

3.3 LimitedBox

用於限定最大寬高，與ConstainedBox相似，只是LimitedBox沒有最小寬高限制。 經常使用屬性

屬性名	類型	默認值	說明
maxWidth	double	double.infini	最大寬度
maxHeight	double	double.infinity	最大高度

3.4 AspectRatio

用於設置調整child的寬高比。適用於須要固定組件寬高比的情景。aspectRatio屬性不能爲null，必須大於0且必須是有限的。

3.5 FractionallySizedBox

會根據現有空間調整child的尺寸，適用在一個區域裏取百分比尺寸時。若是寬高因子爲null，則child的寬高會盡量充滿整個區域。

經常使用屬性

屬性名	類型	說明
alignment	AlignmentGeometry	對齊方式，不能爲null
widthFactor	double	寬度因子，寬度乘以該值，就是最後的寬度
heightFactor	double	高度因子，用做計算最後實際高度

列表及表格佈局

4.1 ListView

ListView 是一個線性佈局的widgets 列表。是最經常使用的滑動組件，它在滾動方向上一個接一個地顯示它的孩子。在交叉軸中，須要孩子填充ListView。

經常使用屬性

屬性名	類型	說明
itemExtent	double	指定Item在滑動方向上的高度，用來提升滑動性能
padding	EdgeInsetsGeometry	用來設置BoxScrollView中子控件與父控件的間距
ScrollDirection	enum	滾動方向
reverse	bool	決定滾動方向是否與閱讀方向一致
controller	ScrollController	控制滾動的位置
primary	bool	當內容不足以滾動時，是否支持滾動；對於iOS系統還有一個效果：當用戶點擊狀態欄時是否滑動到頂部
physics	ScrollPhysics	控制用戶滾動視圖的交互
shrinkWrap	bool	scroll view在滑動方向上的高度是否由內容高度決定，false：則高度爲滑動方向上的最大容許高度；若是在滑動方向上沒有設置約束，則這個字段必須設置爲true，不然會報錯。
cacheExtent	double	可見區域的先後會有必定高度的空間去緩存子控件，當滑動時就能夠迅速呈現

4.2 GridView

網格佈局 最經常使用的網格佈局是 GridView.count，它建立了一個在橫軸上具備固定數量 網格塊 的平鋪的佈局，和 GridView.extent ，它使用具備最大橫軸範圍的 網格塊 建立佈局。自定義SliverGridDelegate 能夠生成任意2D排列的子代，包括未對齊或重疊的排列

經常使用屬性

屬性名	類型	說明
scrollDirection	enum	滾動方向
reverse	bool	決定滾動方向是否與閱讀方向一致
controller	ScrollController	控制滾動的位置
primary	bool	當內容不足以滾動時，是否支持滾動；對於iOS系統還有一個效果：當用戶點擊狀態欄時是否滑動到頂部
physics	ScrollPhysics	控制用戶滾動視圖的交互
shrinkWrap	bool	scroll view在滑動方向上的高度是否由內容高度決定，false：則高度爲滑動方向上的最大容許高度；若是在滑動方向上沒有設置約束，則這個字段必須設置爲true，不然會報錯。
padding	EdgeInsetsGeometry	用來設置BoxScrollView中子控件與父控件的間距
gridDelegate	SliverGridDelegate	一個控制 GridView 中子項佈局的委託。
cacheExtent	double	可見區域的先後會有必定高度的空間去緩存子控件，當滑動時就能夠迅速呈現
semanticChildCount	int	將提供語義信息的子代數量

4.3 Table

表格佈局，每一行的高度由內容決定，每一列的寬度由列數決定。

經常使用屬性

屬性名	類型	說明
columnWidths	Map<int, TableColumnWidth>	設置每一列的寬度
defaultColumnWidth	TableColumnWidth	默認的每一列寬度，默認狀況下均分
textDeirection	TextDirection	文字方向
border	TableBorder	表格邊框
defaultVerticalAlignment	TableCellVerticalAlignment	對齊方向。默認垂直方向
textBaseLine	TextBaseLine	defaultVerticalAlignment爲baseline時，會用到該屬性

其餘佈局

5.1 Transform

矩陣轉換。能夠對child作平移、旋轉、縮放等操做。

經常使用屬性

屬性名	類型	說明
transform	Matrix4	一個4x4矩陣
origin	Offset	旋轉點，相對於左上角頂點的偏移。默認爲左上角頂點
alignment	AlignmentGeometry	對齊方式
transformHitTests	bool	點擊區域是否也作相應的改變

5.2 Baseline

基準線佈局，將全部元素底部放在同一水平線上。

經常使用屬性

屬性名	類型	說明
baseline	double	baseline數值，必需要有，從頂部算
baselineType	TextBaseline	baseline類型，必需要有。目前兩種類型：alphabetic對齊底部，ideographic對齊

5.3 Offstage

用於控制child是否顯示。

經常使用屬性

屬性名	類型	默認值	說明
offstage	bool	true	默認爲true表示不顯示，false時顯示該組件

5.4 Wrap

跟row和column有些類似。單行的Wrap跟Row同樣，單列的Wrap跟Column同樣。適用於須要按寬度或高度讓child自動換行的場景。

經常使用屬性

屬性名	類型	默認值	說明
direction	Axis	Axis.horizontal	主軸方向，默認水平
alignment	WrapAlignment	WrapAlignment.start	主軸方向對齊方式，默認爲start
spacing	double	0.0	主軸方向的間距
runAlignment	WrapAlignment	WrapAlignment.start	run的對齊方式，能夠理解爲新的行或列
runSpacing	double	0.0	run的間距
crossAxisAlignment	WrapAlignment	WrapAlignment.start	交叉軸方向對齊方式
textDirection	TextDirection	-	文本方向
verticalDirection	VerticalDirection	-	children的擺放順序，默認是down