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

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

這篇文章主要介紹了Flutter輸入框TextField屬性及監(jiān)聽(tīng)事件介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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,
   ...
 })

屬性	類(lèi)型	說(shuō)明
controller	TextEditingController	控制器，通過(guò)它可以獲取文本內(nèi)容，監(jiān)聽(tīng)編輯文本事件，大多數(shù)情況下我們需要主動(dòng)提供一個(gè)控制器
focusNode	InputDecoration	焦點(diǎn)控制
decoration	InputDecoration	用于控制文本的外觀，如提示文本、背景色、邊框等
keyboardType	TextInputType	用于設(shè)置輸入框的默認(rèn)鍵盤(pán)類(lèi)型
textInputAction	TextInputAction	鍵盤(pán)動(dòng)作圖標(biāo)按鈕，他是一個(gè)枚舉值
style	TextStyle	正在編輯的文本樣式
textAlign	TextAlign	文本框的在水平方向的對(duì)齊方式
autofocus	bool	是否自動(dòng)獲取焦點(diǎn)
obscureText	bool	是否隱藏正在編輯的文本，用于密碼輸入場(chǎng)景
maxLines	int	輸入框的最大行數(shù)
maxlength	int	文本框的最大長(zhǎng)度
maxLengthEnforcement		當(dāng)文本長(zhǎng)度超出文本框長(zhǎng)度時(shí)如何處理
toolbarOptions	ToolbarOptions	長(zhǎng)按時(shí)出現(xiàn)的選項(xiàng)
onChange	ValueChanged<String>	輸入框改變時(shí)候的回調(diào)函數(shù)，也可以通過(guò)controller來(lái)監(jiān)聽(tīng)
onEditingComplete	VoidCallback	輸入完后觸發(fā)的回調(diào)函數(shù)，不接受參數(shù)
onSubmitted	ValueChanged<String>	接收ValueChanged<String>的參數(shù)
inputFormatters	List<TextInputFormatter>	用于指定輸入格式,可以用于檢驗(yàn)格式
enable	bool	為bool時(shí)，輸入框?qū)⒆優(yōu)榻脿顟B(tài)
cursorWidth、cursorRadius和cursorColor		這三個(gè)屬性是用于自定義輸入框光標(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:"用戶(hù)名",
                 //提示信息
                 hintText: "用戶(hù)名或郵箱",
                 //圖標(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)聽(tīng)事件：

獲取內(nèi)容的兩種方式：

定義兩個(gè)變量，用于保存用戶(hù)名和密碼，然后再onChanged觸發(fā)時(shí)，各自保存輸入內(nèi)容
通過(guò)Controller直接獲取,onChanged是一種單純的監(jiān)聽(tīng)改變事件，但Controller中還有一些其他方法可以使用。

第一種方式：

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

第二種方式：

定義一個(gè)controller：

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

完整代碼：

void main()=>runApp(MyApp());
 ?
 class MyApp extends StatelessWidget
 {
   @override
   Widget build(BuildContext context) {
     //定義一個(gè)controller
     TextEditingController _unameController = TextEditingController();
     //調(diào)用.addListener重寫(xiě)其中的方法
     _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)聽(tīng)
               controller: _unameController,
               autofocus: true,
               decoration: const InputDecoration(
                 //文本
                 labelText:"用戶(hù)名",
                 //提示信息
                 hintText: "用戶(hù)名或郵箱",
                 //圖標(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");
               },
             ),
           ],
         ),
       )
     );
   }
 }

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

您可能感興趣的文章: