Tags: flutter
Flutter頁面布局篇
[TOC]
1. 布局及裝飾組件說明
| 組件名稱 | 中文釋義 | 說明 |
|---|---|---|
| Align | 對齊布局 | 指定child的對齊方式 |
| AspectRatio | 調(diào)整寬高比 | 根據(jù)設(shè)置的寬高比調(diào)整child組件 |
| BaseLine | 基準(zhǔn)線布局 | 所有的child底部所在的同一水平線 |
| Center | 居中布局 | child處于水平和垂直方向的中間位置 |
| Column | 垂直布局 | 對child在垂直方向進(jìn)行排列 |
| ConstrainedBox | 限定寬高 | 限定child的最大值 |
| Container | 容器布局 | 容器布局是一個組合的Widget，包含定位和尺寸 |
| FittedBox | 縮放布局 | 縮放以及位置調(diào)整 |
| FractionallySizedBox | 百分比布局 | 根據(jù)現(xiàn)有空間按照百分比調(diào)整child的尺寸 |
| GridView | 網(wǎng)格布局 | 對多行多列同時進(jìn)行操作 |
| IndexedStack | 棧索引布局 | IndexedStack繼承自Stack，顯示第index個child，其他child是不可見的 |
| LimitedBox | 限定寬高布局 | 對最大寬高進(jìn)行限制 |
| ListView | 列表布局 | 用列表方式進(jìn)行布局，如多項數(shù)據(jù)的場景 |
| Offstage | 開關(guān)布局 | 控制是否顯示組件 |
| OverflowBox | 溢出父容器顯示 | 允許child超出父容器的范圍顯示 |
| Padding | 填充布局 | 處理容器和chid之間的間距 |
| Row | 水平布局 | 對child在水平方向進(jìn)行排列 |
| SizedBox | 設(shè)置具體尺寸 | 用特定大小的盒子來限定child寬度和高度 |
| Stack/Alignment | Alignment棧布局 | 根據(jù)Alignment組件的屬性將child定位在Stack組件上 |
| Stack/Positioned | Positioned棧布局 | 根據(jù)Positioned組件的屬性將child定位在Stack組件上 |
| Table | 表格布局 | 使用表格的行和列進(jìn)行布局 |
| Transform | 矩陣轉(zhuǎn)換 | 做矩陣變換，對child做平移、旋轉(zhuǎn)、縮放等操作 |
| Wrap | 按寬高自動換行 | 按寬度或高度，讓child自動換行布局 |
2. 基礎(chǔ)布局處理
2.1 Container(容器布局)
Container在Flutter里使用非常多，是一個組合Widget，內(nèi)部有繪制Widget、定位Widget和尺寸Widget。
2.2 Center(居中布局)
居中布局，子元素處于水平和垂直方向的中間。
2.3 Padding(填充布局)
用于處理容器和子元素間的間距。
2.4 Align(對齊布局)
將子組件按指定方式對齊，并根據(jù)子組件的大小調(diào)整自己的大小。
2.5 Row(水平布局)
水平方向是主軸，垂直方向是交叉軸。
2.6 Column(垂直布局)
垂直方向是主軸，水平方向是交叉軸。
2.7 FittedBox(縮放布局)
FittedBox會在自己的尺寸范圍內(nèi)縮放并調(diào)整child位置。
兩個重要屬性：
fit：縮放方式。默認(rèn)值是BoxFix.contain，即child在FittedBox范圍內(nèi)，盡可能大。contain是在保證child寬高比的前提下，盡可能填滿。
alignment：對齊方式。默認(rèn)值是Alignment.center，居中顯示child。
2.8 Stack/Alignment
Stack常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| 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 | 子元素相對左側(cè)邊界距離 |
| right | double | 子元素相對右側(cè)邊界距離 |
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. 寬高尺寸處理
3.1 SizedBox
特定大小的盒子，強(qiáng)制child有特定的寬度和高度。如果寬度或高度為null，該組件會調(diào)整自身大小以匹配child的尺寸。
3.2 ConstrainedBox
用于限定child的最大、最小寬高。如果child為null，會盡可能縮小尺寸。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| constraints | BoxConstraints | child的限制條件，限制最大、最小寬高 |
| child | Widget | 子元素組件 |
3.3 LimitedBox
用于限定最大寬高，與ConstainedBox類似，只是LimitedBox沒有最小寬高限制。
常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| maxWidth | double | double.infini | 最大寬度 |
| maxHeight | double | double.infinity | 最大高度 |
3.4 AspectRatio
用于設(shè)置調(diào)整child的寬高比。適用于需要固定組件寬高比的情景。aspectRatio屬性不能為null，必須大于0且必須是有限的。
3.5 FractionallySizedBox
會根據(jù)現(xiàn)有空間調(diào)整child的尺寸，適用在一個區(qū)域里取百分比尺寸時。如果寬高因子為null，則child的寬高會盡可能充滿整個區(qū)域。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| alignment | AlignmentGeometry | 對齊方式，不能為null |
| widthFactor | double | 寬度因子，寬度乘以該值，就是最后的寬度 |
| heightFactor | double | 高度因子，用作計算最后實際高度 |
4. 列表及表格布局
4.1 ListView
4.2 GridView
4.3 Table
表格布局，每一行的高度由內(nèi)容決定，每一列的寬度由列數(shù)決定。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| columnWidths | Map<int, TableColumnWidth> | 設(shè)置每一列的寬度 |
| defaultColumnWidth | TableColumnWidth | 默認(rèn)的每一列寬度，默認(rèn)情況下均分 |
| textDeirection | TextDirection | 文字方向 |
| border | TableBorder | 表格邊框 |
| defaultVerticalAlignment | TableCellVerticalAlignment | 對齊方向。默認(rèn)垂直方向 |
| textBaseLine | TextBaseLine | defaultVerticalAlignment為baseline時，會用到該屬性 |
5. 其他布局
5.1 Transform
矩陣轉(zhuǎn)換?？梢詫hild做平移、旋轉(zhuǎn)、縮放等操作。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| transform | Matrix4 | 一個4x4矩陣 |
| origin | Offset | 旋轉(zhuǎn)點，相對于左上角頂點的偏移。默認(rèn)為左上角頂點 |
| alignment | AlignmentGeometry | 對齊方式 |
| transformHitTests | bool | 點擊區(qū)域是否也做相應(yīng)的改變 |
5.2 Baseline
基準(zhǔn)線布局，將所有元素底部放在同一水平線上。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| baseline | double | baseline數(shù)值，必須要有，從頂部算 |
| baselineType | TextBaseline | baseline類型，必須要有。目前兩種類型：alphabetic對齊底部，ideographic對齊 |
5.3 Offstage
用于控制child是否顯示。
常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| offstage | bool | true | 默認(rèn)為true表示不顯示，false時顯示該組件 |
5.4 Wrap
跟row和column有些相似。單行的Wrap跟Row一樣，單列的Wrap跟Column一樣。適用于需要按寬度或高度讓child自動換行的場景。
常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| direction | Axis | Axis.horizontal | 主軸方向，默認(rèn)水平 |
| alignment | WrapAlignment | WrapAlignment.start | 主軸方向?qū)R方式，默認(rèn)為start |
| spacing | double | 0.0 | 主軸方向的間距 |
| runAlignment | WrapAlignment | WrapAlignment.start | run的對齊方式，可以理解為新的行或列 |
| runSpacing | double | 0.0 | run的間距 |
| crossAxisAlignment | WrapAlignment | WrapAlignment.start | 交叉軸方向?qū)R方式 |
| textDirection | TextDirection | - | 文本方向 |
| verticalDirection | VerticalDirection | - | children的擺放順序，默認(rèn)是down |
