5.Flutter-基礎(chǔ)組件(輸入框及表單)

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ù)限制。

maxLengthmaxLengthEnforcement?: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)聽。

onEditingCompleteonSubmitted:這兩個回調(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、cursorRadiuscursorColor:這三個屬性是用于自定義輸入框光標(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)邏輯方法校驗
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容