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