- 部落格 gz.lovelp.xin/
1. 重要概念
一切皆元件。flutter所有的元素都是由元件組成。比如一個佈局元素、一個動畫、一個裝飾效果等。
2. 容器元件
容器元件Container包含一個子widget，自身具備alignment、padding等屬性，方便佈局過程中擺放child。
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| key | key | Container唯一識別符號，用於查詢更新 |
| alignment | AlignmentGeometry | 控制child的對齊方式，如果Container或者Container的父節點尺寸大於child的尺寸，該屬性設定會起作用，有很多種對齊方式 |
| padding | EdgeInsetsGeometry | Decoration內部的空白區，如果有child，child位於padding內部 |
| color | Color | 用來設定Container背景色，如果foregroudDecoration設定的話，可能會覆蓋color效果 |
| decoration | Decoration | 繪製在child後面的修飾，設定了Decoration的話，就不能設定color屬性，否則會報錯，此時應該在Decoration中進行顏色的設定 |
| foregroundDecoration | Decoration | 繪製在child前面的裝飾 |
| width | double | Container的寬度，設定為double.infinity可以強制在寬度上撐滿，不設定，則根據child和父節點兩者一起佈局 |
| height | double | Container的高度，設定為double.infinity可以強制在高度上撐滿 |
| constraints | BoxConstraints | 新增到child上額外的約束條件 |
| margin | EdgeInsetsGeometry | 圍繞在Decoration和child之外的空白區域，不屬於內容區域 |
| transform | Matrix4 | 設定Container的變換矩陣，型別為Matrix4 |
| child | Widget | Container中的內容Widget |
- padding與margin的不同之處：padding是包含在Content內，而margin是外部邊界。設定點選事件的話，padding區域會響應，而margin區域不會響應。
3. 圖片元件
圖片元件Image顯示影象的元件，有多種建構函式：
- new Image：從ImageProvider獲取影象
- new Image.asset：載入資源圖片
- new Image.file：載入本地圖片檔案
- new Image.network：載入網路圖片
- new Image.memory：載入Uint8List資源圖片
常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| image | ImageProvider | 抽象類，需要自己實現獲取圖片資料的操作 |
| width/height | double | Image顯示區域的寬度和高度設定，這裡需要把Image和圖片兩個區分開。圖片本身有大小，Image Widget是圖片的容器，本身也有大小。寬度和高度的配置經常和fitshu'x |
| fit | BoxFit | 圖片填充模式，具體取值見 BoxFit取值表 |
| color | Color | 圖片顏色 |
| colorBlendMode | BlendMode | 在對圖片進行手動處理的時候，可能用到圖層混合，如改變圖片顏色，此屬性可以對顏色進行混合處理，有多種模式 |
| alignment | Alignment | 控制圖片的擺放位置，比如圖片放置在右下角則為Alignment.bottomRight |
| repeat | ImageRepeat | 此屬性可以設定圖片的重複模式。moRepeat為不重複，Repeat為x和y方向重複，repeatX為x方向重複，repeatY為y方向重複 |
| centerSlice | Rect | 當圖片需要被拉伸顯示時，centerSlice定義的矩形區域會被拉伸，可以理解為我們在圖片內部定義9個點用作拉伸，9個點為"上","下","左","右","上中","下中","左中","右中","正中" |
| matchTextDirection | bool | matchTextDirection與Derection配合使用。TextDirectio有兩個值分別為：TextDirection.ltr從左到右展示圖片，TextDirection.rtl為從右到左展示圖片 |
| gaplessPlayback | bool | 當ImageProvider發生變化後，重新載入圖片的過程中，原圖片的展示是否保留。值為true則保留，值為false則不保留，直接等待下一張圖片載入 |
BoxFit取值及描述
| 取值 | 描述 |
|---|---|
| BoxFit.fill | 全圖顯示，顯示可能拉伸，充滿 |
| BoxFit.contain | 全圖顯示，顯示原比例，不需充滿 |
| BoxFit.cover | 顯示可能拉伸，可能裁剪，充滿 |
| BoxFit.fitWidth | 顯示可能拉伸，可能裁剪，寬度充滿 |
| BoxFit.fitHeight | 顯示可能拉伸，可能裁剪，高度充滿 |
| BoxFit.none | 原始大小 |
| BoxFit.scaleDown | 效果和BoxFit.contain差不多，但是該屬性不允許顯示超過原圖大小(可小不可大) |
4. 文字元件
4.1 Text
文字元件Text負責顯示文字和定義顯示樣式。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| data | String | 資料為要顯示的文字 | |
| maxLines | int | 0 | 文字顯示的最大行數 |
| style | TextStyle | null | 文字樣式，可定義文字的字型大小、顏色、粗細等 |
| textAlign | TextAlign | TextAlign.center | 文字水平方向對齊方式，取值右center、end、justify、left、right、start、values |
| textDirection | TextDirection | TextDirection.ltr | 有些文字書寫方向從左到右，如英語、中文，有些則是從右到左，比如烏爾都語。從左到右使用TextDirection.ltr，從右到左使用TextDirection.rtl |
| textScaleFactor | double | 1.0 | 字型縮放係數，比如設定為1.5，那麼字型會放大1.5倍 |
| textSpan | TextSpan | null | 文字塊，TextSpan裡可以包含文字內容及樣式 |
4.2 RichText
富文字元件RichText使用多個不同風格的widget顯示文字，要顯示的文字使用TextSpan物件樹來描述，每個物件都有一個用於該子樹的關聯樣式。文字可能多行，也可能顯示在同一行，取決於佈局約束。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| text | TextSpan | - | 要顯示的的文字 |
| textAlign | TextAlign | TextAlign.start | 文字水平方向對齊方式，取值右center、end、justify、left、right、start、values |
| textDirection | TextDirection | TextDirection.ltr | 有些文字書寫方向從左到右，如英語、中文，有些則是從右到左，比如烏爾都語。從左到右使用TextDirection.ltr，從右到左使用TextDirection.rtl |
| softWrap | bool | true | 是否自動換行 |
| overflow | TextOverflow | TextOverflow.clip | 內容超出文字範圍處理方式，預設截斷處理 |
| textScaleFactor | double | 1.0 | 文字縮放比例，預設100%比例顯示 |
| maxLines | int | - | 最大顯示行數 |
5. 圖示及按鈕元件
5.1 圖示元件
圖示元件Icon展示圖示的元件，該元件不可互動，要實現互動圖示，可以考慮使用IconButton元件。圖示相關元件有以下幾個：
- IconButton：可互動的Icon
- Icons：框架自帶Icon集合
- IconTheme：Icon主題
- ImageIcon：通過AssetImages或者其他圖片顯示Icon
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| color | Color | null | 圖示的顏色，例如Colors.green[500] |
| icon | IconData | null | 展示的具體圖示，可使用Icons圖示列表中的任意一個圖示即可，如Icons.phone表示一個電話的圖示 |
| style | TextStyle | null | 文字樣式，可定義文字的字型大小、顏色、粗細等 |
| size | Double | 24.0 | 圖示的大小，注意需要帶上小數位 |
| textDirection | TextDirection | TextDirection.ltr | Icon元件裡也可以新增文字內容。有些文字書寫的方向是從左到右，有些則是從右到左。從左到右使用TextDirection.ltr，從右到左使用TextDirection.rtl |
5.2 圖示按鈕元件
圖示按鈕元件IconButton是基於Meterial Design風格的元件，可以響應按下的事件，並且按下時帶水波紋效果。如果它的onPressed回撥函式為null，那麼這個按鈕處於禁用狀態，並且不可按下。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| alignment | AlignmentGeometry | Alignment.center | 定義IconButton的Icon對齊方式，預設為居中。Alignment可以設定x，y的偏移量 |
| icon | Widget | null | 展示的具體圖示，可以使用Icons圖示列表中任意一個圖示即可，如Icons.phone表示一個電話圖示 |
| color | Color | null | 圖示元件的顏色 |
| disabledColor | Color | ThemeData.disabledColor | 圖示元件禁用狀態的顏色，預設為主題裡的禁用顏色，也可以設定為其他顏色 |
| iconSize | double | 24.0 | 圖示的大小，注意需要帶上小數點 |
| onPressed | VoidCallback | null | 當按鈕按下時會觸發此回撥事件 |
| tooltip | String | "" | 當按鈕長按下時的提示語句 |
5.3 凸起按鈕元件
凸起按鈕元件RaisedButton是Material Design中的button，一個凸起的材質矩形按鈕，它可以響應按下事件，並且按下時會帶一個觸控效果。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| color | Color | null | 元件的顏色 |
| disabledColor | Color | ThemeData.disabledColor | 元件禁用狀態的顏色，預設為主題裡的禁用顏色，也可以設定為其他顏色 |
| onPressed | VoidCallback | null | 當按鈕按下時會觸發此回撥事件 |
| child | Widget | - | 按鈕的child通常為一個Text文字元件，用來顯示按鈕的文字 |
| enable | bool | true | 按鈕是否為禁用狀態 |
6. 列表控制元件
列表是最常見的需求。在Flutter中，用ListView來顯示列表項，支援垂直和水平方向展示，通過一個屬性我們就可以控制其方向，列表有以下幾類：
- 水平的列表
- 垂直的列表
- 資料量非常大的列表
- 矩陣式的列表
6.1 基礎列表元件
基礎列表元件為ListView元件。
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| scrollDirection | Axix | Axis.vertical | 列表的排列方向，Axis.vertical為垂直方向，是預設值，Axis.horizontal為水平方向 |
| padding | EdgInsetsGeometry | - | 列表內部的空白區域，如果有child，child位於padding內部 |
| reverse | bool | false | 元件排列方向 |
| children | List<Widget> | - | 列表元素，注意List元素全部為Widget型別 |
6.2 水平列表元件
水平列表元件即為水平方向排列的元件，列表內部元素以水平方向排列。把ListView元件的scrollDirection屬性設定為Axis.horizontal即可。
6.3 長列表元件
當列表的資料項非常多時，需要使用長列表，比如淘寶後臺訂單列表、手機通訊錄等，這些列表項資料很多。長列表也是使用ListView作為基礎元件，只不過需要新增一個列表項構造器itemBuilder。
7. 網格佈局元件
網格佈局元件GridView可以實現多行多列布局的應用場景。使用GridView建立網格列表有多種方式：
- GridView.count：通過單行展示個數建立
- GridView.extent：通過最大寬度建立
常用屬性
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| scrollDirection | Axix | Axis.vertical | 滾動的方向，Axis.vertical為垂直方向，是預設值，Axis.horizontal為水平方向 |
| reverse | bool | false | 預設是從上或者左，向下或者右滾動的，這個屬性控制是否反向，預設值為false |
| controller | ScrollController | - | 控制child滾動時的位置 |
| primary | bool | - | 是否是父節點的PrimaryScrollController所關聯的主滾動檢視 |
| phisics | ScrollPhysics | - | 滾動的檢視如何響應使用者的輸入 |
| shrinkWrap | bool | false | 滾動方向的滾動檢視內容是否應該由正在檢視的內容所決定 |
| padding | EdgInsetsGeometry | - | 四周的空白區域 |
| gridDelegate | SliverGridDelegate | - | 控制GridView中子節點佈局的delegate |
| cacheExtent | double | - | 快取區域 |
8. 表單元件
表單是一個包含表單元素的區域。表單元素允許使用者輸入內容，比如文字域，下拉選單，單選框，核取方塊等。常見應用場景有：登入、註冊、輸入資訊等。表單裡有兩個重要的元件，一個是Form元件，用來左整個表單提交使用的；另一個是TextFormField元件，用來做使用者輸入的。
Form元件常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| key | Key | 元件在整個Widget樹中的key值 |
| autovalidate | bool | 是否自動提交表單 |
| child | Widget | 元件child只能有一個子元件 |
| onChanged | VoidCallback | 當FormField值改變時的回撥函式 |
TextFormField元件常用屬性
| 屬性名 | 型別 | 說明 |
|---|---|---|
| autovalidate | bool | 自動驗證值 |
| initialValue | T | 表單欄位初始值 |
| onSaved | FormFieldSetter<T> | 當Form表單呼叫儲存方法Save時，回撥的函式 |
| validator | FormFieldValidate<T> | Form表單驗證器 |