日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

更新時間： 2021-10-04 編程語言

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 焦點(diǎn)控制
decoration InputDecoration 用于控制文本的外觀，如提示文本、背景色、邊框等
keyboardType TextInputType 用于設(shè)置輸入框的默認(rèn)鍵盤類型
textInputAction TextInputAction 鍵盤動作圖標(biāo)按鈕，他是一個枚舉值
style TextStyle 正在編輯的文本樣式
textAlign TextAlign 文本框的在水平方向的對齊方式
autofocus bool 是否自動獲取焦點(diǎn)
obscureText bool 是否隱藏正在編輯的文本，用于密碼輸入場景
maxLines int 輸入框的最大行數(shù)
maxlength int 文本框的最大長度
maxLengthEnforcement 當(dāng)文本長度超出文本框長度時如何處理
toolbarOptions ToolbarOptions 長按時出現(xiàn)的選項(xiàng)
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> 用于指定輸入格式,可以用于檢驗(yàn)格式
enable bool 為bool時，輸入框?qū)⒆優(yōu)榻脿顟B(tài)
cursorWidth、cursorRadius和cursorColor 這三個屬性是用于自定義輸入框光標(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)聽事件：

獲取內(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: "用戶名或郵箱",
                 //圖標(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");
               },
             ),
           ],
         ),
       )
     );
   }
 }

原文鏈接：https://blog.csdn.net/m0_55721894/article/details/121598084

欄目分類
最近更新