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