Material 組件庫中提供了輸入框組件TextField和表單組件Form誉尖。下面我們分別介紹一下

5.1?TextField

TextField用于文本輸入常空，它提供了很多屬性凹炸，我們先簡單介紹一下主要屬性的作用洞渤，然后通過幾個示例來演示一下關(guān)鍵屬性的用法雪隧。

TextField關(guān)鍵屬性的用法

controller：編輯框的控制器碍讯，通過它可以設(shè)置/獲取編輯框的內(nèi)容悬蔽、選擇編輯內(nèi)容、監(jiān)聽編輯文本改變事件捉兴。大多數(shù)情況下我們都需要顯式提供一個controller來與文本框交互蝎困。如果沒有提供controller录语，則TextField內(nèi)部會自動創(chuàng)建一個。

定義一個控制器用來監(jiān)聽輸入以及初始化賦值等等

監(jiān)聽TextField輸入

focusNode：用于控制TextField是否占有當(dāng)前鍵盤的輸入焦點禾乘。它是我們和鍵盤交互的一個句柄（handle通過焦點的控制來關(guān)閉鍵盤澎埠，或者移動到下一個TextField)。

? ? ? ? 1.點擊完成鍵盤完成按鈕始藕，焦點自動跳轉(zhuǎn)到下一個TextField

FocusScopeNode方式焦點自動跳轉(zhuǎn)

? ? ? ? 2.控制具體某一個焦點蒲稳，requestFous(FocusNode),聚焦某個具體的TextField,代碼如下

聚焦某個具體的TextField

?3.隱藏鍵盤

對應(yīng)的FocusNode.unfous()或者?FocusManager.instance.primaryFocus.unfocus();

4.自動跳轉(zhuǎn)焦點的時候跳過部分控件

自動跳轉(zhuǎn)焦點的時候跳過部分控件

5.焦點監(jiān)聽

? FocusNode繼承自ChangeNotifier，通過FocusNode可以監(jiān)聽焦點的改變事件伍派，如：

獲得焦點時focusNode.hasFocus值為true江耀，失去焦點時為false

InputDecoration：用于控制TextField的外觀顯示，如提示文本诉植、背景顏色祥国、邊框等。

InputDecoration?外觀顯示設(shè)置

keyboardType：用于設(shè)置該輸入框默認(rèn)的鍵盤輸入類型晾腔，取值如下：

設(shè)置該輸入框默認(rèn)的鍵盤輸入類型

keyboardType鍵盤類型代碼以及效果圖

textInputAction：鍵盤動作按鈕圖標(biāo)(即回車鍵位圖標(biāo))系宫，它是一個枚舉值，有多個可選值建车，全部的取值列表讀者可以查看API文檔扩借，下面是當(dāng)值為TextInputAction.search時，原生Android系統(tǒng)下鍵盤樣

鍵盤回車鍵圖標(biāo)設(shè)置

style：正在編輯的文本樣式缤至。

textAlign: 輸入框內(nèi)編輯文本在水平方向的對齊方式潮罪。

autofocus: 是否自動獲取焦點。

obscureText：是否隱藏正在編輯的文本领斥，如用于輸入密碼的場景等嫉到，文本內(nèi)容會用“?”替換。

maxLines：輸入框的最大行數(shù)月洛，默認(rèn)為1何恶；如果為null，則無行數(shù)限制嚼黔。

maxLength和maxLengthEnforcement?：maxLength代表輸入框文本的最大長度细层，設(shè)置后輸入框右下角會顯示輸入的文本計數(shù)。maxLengthEnforcement決定當(dāng)輸入文本長度超過maxLength時如何處理唬涧，如截斷疫赎、超出等。

toolbarOptions：長按或鼠標(biāo)右擊時出現(xiàn)的菜單碎节，包括 copy捧搞、cut、paste 以及 selectAll。

onChange：輸入框內(nèi)容改變時的回調(diào)函數(shù)胎撇；注：內(nèi)容改變事件也可以通過controller來監(jiān)聽介粘。

onEditingComplete和onSubmitted：這兩個回調(diào)都是在輸入框輸入完成時觸發(fā)，比如按了鍵盤的完成鍵（對號圖標(biāo)）或搜索鍵（??圖標(biāo)）晚树。不同的是兩個回調(diào)簽名不同碗短，onSubmitted回調(diào)是ValueChanged<String>類型，它接收當(dāng)前輸入內(nèi)容做為參數(shù)题涨，而onEditingComplete不接收參數(shù)偎谁。

inputFormatters：用于指定輸入格式；當(dāng)用戶輸入內(nèi)容改變時纲堵，會根據(jù)指定的格式來校驗巡雨。

enable：如果為false，則輸入框會被禁用席函，禁用狀態(tài)不接收輸入和事件铐望，同時顯示禁用態(tài)樣式（在其decoration中定義）。

cursorWidth茂附、cursorRadius和cursorColor：這三個屬性是用于自定義輸入框光標(biāo)寬度正蛙、圓角和顏色的

對應(yīng)的屬性值

光標(biāo)樣式效果圖

復(fù)制粘貼全選

5.2 Form表單

實際業(yè)務(wù)中，在正式向服務(wù)器提交數(shù)據(jù)前营曼，都會對各個輸入框數(shù)據(jù)進行合法性校驗乒验，但是對每一個TextField都分別進行校驗將會是一件很麻煩的事。還有蒂阱，如果用戶想清除一組TextField的內(nèi)容锻全，除了一個一個清除有沒有什么更好的辦法呢？為此录煤，F(xiàn)lutter提供了一個Form?組件鳄厌，它可以對輸入框進行分組，然后進行一些統(tǒng)一操作妈踊，如輸入內(nèi)容校驗了嚎、輸入框重置以及輸入內(nèi)容保存。

1.Form

Form繼承自StatefulWidget對象廊营，它對應(yīng)的狀態(tài)類為FormState歪泳。我們先看看Form類的定義

Form組件相關(guān)參數(shù)

autovalidate：是否自動校驗輸入內(nèi)容；當(dāng)為true時赘风，每一個子 FormField 內(nèi)容發(fā)生變化時都會自動校驗合法性夹囚，并直接顯示錯誤信息。否則邀窃，需要通過調(diào)用FormState.validate()來手動校驗。

onWillPop：決定Form所在的路由是否可以直接返回（如點擊返回按鈕），該回調(diào)返回一個Future對象瞬捕，如果 Future 的最終結(jié)果是false鞍历，則當(dāng)前路由不會返回；如果為true肪虎，則會返回到上一個路由劣砍。此屬性通常用于攔截返回按鈕。

onChanged：Form的任意一個子FormField內(nèi)容發(fā)生變化時會觸發(fā)此回調(diào)扇救。

2.FormField

Form的子孫元素必須是FormField類型刑枝，F(xiàn)ormField是一個抽象類，定義幾個屬性迅腔，F(xiàn)ormState內(nèi)部通過它們來完成操作装畅，F(xiàn)ormField部分定義如下：

FormField類型

為了方便使用，F(xiàn)lutter 提供了一個TextFormField組件沧烈，它繼承自FormField基礎(chǔ)類掠兄，也是TextField的一個包裝類，所以除了FormField定義的屬性之外锌雀，它還包括TextField的屬性蚂夕。所以我們一般都用TextFormField和From一起使用

3. FormState

FormState為Form的State類，可以通過Form.of()或GlobalKey獲得腋逆。我們可以通過它來對Form的子孫FormField進行統(tǒng)一操作婿牍。我們看看其常用的三個方法：

FormState.validate()：調(diào)用此方法后，會調(diào)用Form子孫FormField的validate回調(diào)惩歉，如果有一個校驗失敗牍汹，則返回false，所有校驗失敗項都會返回用戶返回的錯誤提示柬泽。

FormState.save()：調(diào)用此方法后慎菲，會調(diào)用Form子孫FormField的save回調(diào)，用于保存表單內(nèi)容

FormState.reset()：調(diào)用此方法后锨并，會將子孫FormField的內(nèi)容清空

4.完整的示例

Form組件和TextFormField組件

相關(guān)邏輯方法校驗