Flutter輸入框TextField屬性及監(jiān)聽事件介紹

更新時間：2021年11月29日 17:11:34 作者：老圖拉丁

這篇文章主要介紹了Flutter輸入框TextField屬性及監(jiān)聽事件介紹，小編覺得挺不錯的，現(xià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	用于設置輸入框的默認鍵盤類型
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中設置的

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ù)
               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(
                 //設置監(jiān)聽
               controller: _unameController,
               autofocus: true,
               decoration: const InputDecoration(
                 //文本
                 labelText:"用戶名",
                 //提示信息
                 hintText: "用戶名或郵箱",
                 //圖標
                 prefixIcon: Icon(Icons.person),
               ),
               //設置最大行數(shù)
               maxLines: 1,
             ),
             TextField(
               autofocus: true,
               decoration:const  InputDecoration(
                 labelText:"密碼",
                 hintText: "您的登錄密碼",
                 prefixIcon: Icon(Icons.lock),
               ),
               //隱藏文本
               obscureText: true,
                 //表單改變事件
               onChanged: (value){
                 print("你輸入的內(nèi)容為$value");
               },
             ),
           ],
         ),
       )
     );
   }
 }

到此這篇關于介紹Flutter輸入框TextField屬性及監(jiān)聽事件的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: