Flutter輸入框TextField屬性及監(jiān)聽(tīng)事件介紹
textField用于文本輸入,它提供了很多屬性:
const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration decoration = const InputDecoration(), TextInputType keyboardType, TextInputAction textInputAction, TextStyle style, TextAlign textAlign = TextAlign.start, bool autofocus = false, bool obscureText = false, int maxLines = 1, int maxLength, this.maxLengthEnforcement, ToolbarOptions? toolbarOptions, ValueChanged<String> onChanged, VoidCallback onEditingComplete, ValueChanged<String> onSubmitted, List<TextInputFormatter> inputFormatters, bool enabled, this.cursorWidth = 2.0, this.cursorRadius, this.cursorColor, this.onTap, ... })
屬性 | 類型 | 說(shuō)明 |
---|---|---|
controller | TextEditingController | 控制器,通過(guò)它可以獲取文本內(nèi)容,監(jiān)聽(tīng)編輯文本事件,大多數(shù)情況下我們需要主動(dòng)提供一個(gè)控制器 |
focusNode | InputDecoration | 焦點(diǎn)控制 |
decoration | InputDecoration | 用于控制文本的外觀,如提示文本、背景色、邊框等 |
keyboardType | TextInputType | 用于設(shè)置輸入框的默認(rèn)鍵盤(pán)類型 |
textInputAction | TextInputAction | 鍵盤(pán)動(dòng)作圖標(biāo)按鈕,他是一個(gè)枚舉值 |
style | TextStyle | 正在編輯的文本樣式 |
textAlign | TextAlign | 文本框的在水平方向的對(duì)齊方式 |
autofocus | bool | 是否自動(dòng)獲取焦點(diǎn) |
obscureText | bool | 是否隱藏正在編輯的文本,用于密碼輸入場(chǎng)景 |
maxLines | int | 輸入框的最大行數(shù) |
maxlength | int | 文本框的最大長(zhǎng)度 |
maxLengthEnforcement | 當(dāng)文本長(zhǎng)度超出文本框長(zhǎng)度時(shí)如何處理 | |
toolbarOptions | ToolbarOptions | 長(zhǎng)按時(shí)出現(xiàn)的選項(xiàng) |
onChange | ValueChanged<String> | 輸入框改變時(shí)候的回調(diào)函數(shù),也可以通過(guò)controller來(lái)監(jiān)聽(tīng) |
onEditingComplete | VoidCallback | 輸入完后觸發(fā)的回調(diào)函數(shù),不接受參數(shù) |
onSubmitted | ValueChanged<String> | 接收ValueChanged<String>的參數(shù) |
inputFormatters | List<TextInputFormatter> | 用于指定輸入格式,可以用于檢驗(yàn)格式 |
enable | bool | 為bool時(shí),輸入框?qū)⒆優(yōu)榻脿顟B(tài) |
cursorWidth、cursorRadius和cursorColor | 這三個(gè)屬性是用于自定義輸入框光標(biāo)寬度、圓角和顏色 |
示例:注意提示內(nèi)容都是在InputDecoration中設(shè)置的
void mian()=>runApp(MyApp()); ? class MyApp extends StatelessWidget { ? @override Widget build(BuildContext context) { return MaterialApp( title: "文本輸出框", home:Scaffold( appBar: AppBar(title:const Text("文本輸入框")), body:Column( children:const <Widget>[ TextField( autofocus: true, decoration: InputDecoration( //文本 labelText:"用戶名", //提示信息 hintText: "用戶名或郵箱", //圖標(biāo) prefixIcon: Icon(Icons.person), ), //設(shè)置最大行數(shù) maxLines: 1, ), TextField( autofocus: true, decoration: InputDecoration( labelText:"密碼", hintText: "您的登錄密碼", prefixIcon: Icon(Icons.lock), ), //隱藏文本 obscureText: true, ), ], ), ) ); } }
監(jiān)聽(tīng)事件:
獲取內(nèi)容的兩種方式:
- 定義兩個(gè)變量,用于保存用戶名和密碼,然后再onChanged觸發(fā)時(shí),各自保存輸入內(nèi)容
- 通過(guò)Controller直接獲取,onChanged是一種單純的監(jiān)聽(tīng)改變事件,但Controller中還有一些其他方法可以使用。
第一種方式:
onChanged: (value){ print("你輸入的內(nèi)容為$value"); }
第二種方式:
定義一個(gè)controller:
TextEditingController _unameController = TextEditingController(); _unameController.addListener(() { print("你輸入的內(nèi)容為:${_unameController.text}"); });
完整代碼:
void main()=>runApp(MyApp()); ? class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //定義一個(gè)controller TextEditingController _unameController = TextEditingController(); //調(diào)用.addListener重寫(xiě)其中的方法 _unameController.addListener(() { print("你輸入的內(nèi)容為:${_unameController.text}"); }); return MaterialApp( title: "文本輸出框", home:Scaffold( appBar: AppBar(title:const Text("文本輸入框")), body:Column( children: <Widget>[ TextField( //設(shè)置監(jiān)聽(tīng) controller: _unameController, autofocus: true, decoration: const InputDecoration( //文本 labelText:"用戶名", //提示信息 hintText: "用戶名或郵箱", //圖標(biāo) prefixIcon: Icon(Icons.person), ), //設(shè)置最大行數(shù) maxLines: 1, ), TextField( autofocus: true, decoration:const InputDecoration( labelText:"密碼", hintText: "您的登錄密碼", prefixIcon: Icon(Icons.lock), ), //隱藏文本 obscureText: true, //表單改變事件 onChanged: (value){ print("你輸入的內(nèi)容為$value"); }, ), ], ), ) ); } }
到此這篇關(guān)于介紹Flutter輸入框TextField屬性及監(jiān)聽(tīng)事件的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android圖像繪制(六)獲取本地圖片或拍照?qǐng)D片等圖片資源
從SD卡中獲取圖片資源,或者拍一張新的圖片,然后再進(jìn)行處理(直接處理返回圖片/獲得圖片的地址再處理)接下來(lái)為您詳細(xì)介紹,感興趣的朋友可以了解下2013-01-01Android開(kāi)發(fā)實(shí)現(xiàn)按鈕點(diǎn)擊切換背景并修改文字顏色的方法
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)按鈕點(diǎn)擊切換背景并修改文字顏色的方法,涉及Android界面布局與相關(guān)屬性設(shè)置技巧,需要的朋友可以參考下2018-01-01優(yōu)化SimpleAdapter適配器加載效率的方法
下面小編就為大家?guī)?lái)一篇優(yōu)化SimpleAdapter適配器加載效率的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04Android中ListView分頁(yè)加載數(shù)據(jù)功能實(shí)現(xiàn)
本篇文章主要介紹了Android中ListView分頁(yè)加載數(shù)據(jù)功能實(shí)現(xiàn),具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11android實(shí)現(xiàn)滾動(dòng)文本效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)滾動(dòng)文本效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05Android仿百度谷歌搜索自動(dòng)提示框AutoCompleteTextView簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了Android仿百度谷歌搜索自動(dòng)提示框AutoCompleteTextView簡(jiǎn)單應(yīng)用,結(jié)合實(shí)例形式分析了AutoCompleteTextView Widget使用步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10android實(shí)現(xiàn)簡(jiǎn)單的矩形裁剪框
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)簡(jiǎn)單的矩形裁剪框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05