Material 組件庫中提供了輸入框組件TextField和表單組件Form。下面我們分別介紹一下
5.1?TextField
TextField用于文本輸入,它提供了很多屬性,我們先簡單介紹一下主要屬性的作用,然后通過幾個示例來演示一下關(guān)鍵屬性的用法。

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


focusNode:用于控制TextField是否占有當(dāng)前鍵盤的輸入焦點。它是我們和鍵盤交互的一個句柄(handle通過焦點的控制來關(guān)閉鍵盤,或者移動到下一個TextField)。
? ? ? ? 1.點擊完成鍵盤完成按鈕,焦點自動跳轉(zhuǎn)到下一個TextField

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

?3.隱藏鍵盤
對應(yīng)的FocusNode.unfous()或者?FocusManager.instance.primaryFocus.unfocus();
4.自動跳轉(zhuǎn)焦點的時候跳過部分控件

5.焦點監(jiān)聽
? FocusNode繼承自ChangeNotifier,通過FocusNode可以監(jiān)聽焦點的改變事件,如:

InputDecoration:用于控制TextField的外觀顯示,如提示文本、背景顏色、邊框等。

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


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

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)寬度、圓角和顏色的



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類的定義

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部分定義如下:

為了方便使用,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.完整的示例

