欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 用于設(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)文章

最新評論