flutter的進階之路之經常使用組件

• 博客 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. 圖片組件

• 圖標 www.iconfont.cn/
• 頭像 www.randomuser.me/photos

圖片組件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表單驗證器