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

學無先后，達者為師

網站首頁 編程語言 正文

Flutter輸入框TextField屬性及監聽事件介紹_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 控制器，通過它可以獲取文本內容，監聽編輯文本事件，大多數情況下我們需要主動提供一個控制器
focusNode InputDecoration 焦點控制
decoration InputDecoration 用于控制文本的外觀，如提示文本、背景色、邊框等
keyboardType TextInputType 用于設置輸入框的默認鍵盤類型
textInputAction TextInputAction 鍵盤動作圖標按鈕，他是一個枚舉值
style TextStyle 正在編輯的文本樣式
textAlign TextAlign 文本框的在水平方向的對齊方式
autofocus bool 是否自動獲取焦點
obscureText bool 是否隱藏正在編輯的文本，用于密碼輸入場景
maxLines int 輸入框的最大行數
maxlength int 文本框的最大長度
maxLengthEnforcement 當文本長度超出文本框長度時如何處理
toolbarOptions ToolbarOptions 長按時出現的選項
onChange ValueChanged<String> 輸入框改變時候的回調函數，也可以通過controller來監聽
onEditingComplete VoidCallback 輸入完后觸發的回調函數，不接受參數
onSubmitted ValueChanged<String> 接收ValueChanged<String>的參數
inputFormatters List<TextInputFormatter> 用于指定輸入格式,可以用于檢驗格式
enable bool 為bool時，輸入框將變為禁用狀態
cursorWidth、cursorRadius和cursorColor 這三個屬性是用于自定義輸入框光標寬度、圓角和顏色

示例：注意提示內容都是在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),
               ),
               //設置最大行數
               maxLines: 1,
             ),
             TextField(
               autofocus: true,
               decoration: InputDecoration(
                 labelText:"密碼",
                 hintText: "您的登錄密碼",
                 prefixIcon: Icon(Icons.lock),
               ),
               //隱藏文本
               obscureText: true,
             ),
           ],
         ),
       )
     );
   }
 }

監聽事件：

獲取內容的兩種方式：

  • 定義兩個變量，用于保存用戶名和密碼，然后再onChanged觸發時，各自保存輸入內容
  • 通過Controller直接獲取,onChanged是一種單純的監聽改變事件，但Controller中還有一些其他方法可以使用。

第一種方式：

onChanged: (value){
                 print("你輸入的內容為$value");
 }

第二種方式：

定義一個controller：

TextEditingController _unameController = TextEditingController();
     _unameController.addListener(() {
       print("你輸入的內容為：${_unameController.text}");
 });

完整代碼：

void main()=>runApp(MyApp());
 ?
 class MyApp extends StatelessWidget
 {
   @override
   Widget build(BuildContext context) {
     //定義一個controller
     TextEditingController _unameController = TextEditingController();
     //調用.addListener重寫其中的方法
     _unameController.addListener(() {
       print("你輸入的內容為：${_unameController.text}");
     });
     return MaterialApp(
       title: "文本輸出框",
       home:Scaffold(
         appBar: AppBar(title:const Text("文本輸入框")),
         body:Column(
           children: <Widget>[
             TextField(
                 //設置監聽
               controller: _unameController,
               autofocus: true,
               decoration: const InputDecoration(
                 //文本
                 labelText:"用戶名",
                 //提示信息
                 hintText: "用戶名或郵箱",
                 //圖標
                 prefixIcon: Icon(Icons.person),
               ),
               //設置最大行數
               maxLines: 1,
             ),
             TextField(
               autofocus: true,
               decoration:const  InputDecoration(
                 labelText:"密碼",
                 hintText: "您的登錄密碼",
                 prefixIcon: Icon(Icons.lock),
               ),
               //隱藏文本
               obscureText: true,
                 //表單改變事件
               onChanged: (value){
                 print("你輸入的內容為$value");
               },
             ),
           ],
         ),
       )
     );
   }
 }

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

欄目分類
最近更新