flutter中如何使用TextField輸入框組件

這期內容當中小編將會給大家帶來有關flutter中如何使用TextField輸入框組件，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

TextField

顧名思義文本輸入框，類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過這個功能，就不在做具體介紹了，接下來還是具體介紹下Flutter中TextField的用法。

以下內容已更新到 github

TextField的構造方法：

const TextField({  Key key,  this.controller,      //控制器，控制TextField文字  this.focusNode,  this.decoration: const InputDecoration(),   //輸入器裝飾  TextInputType keyboardType: TextInputType.text, //輸入的類型  this.style,  this.textAlign: TextAlign.start,  this.autofocus: false,  this.obscureText: false, //是否隱藏輸入  this.autocorrect: true,  this.maxLines: 1,  this.maxLength,  this.maxLengthEnforced: true,  this.onChanged,      //文字改變觸發  this.onSubmitted,     //文字提交觸發（鍵盤按鍵）  this.onEditingComplete, //當用戶提交可編輯內容時調用  this.inputFormatters,  this.enabled,  this.cursorWidth = 2.0,  this.cursorRadius,  this.cursorColor,  this.keyboardAppearance, })

先來試試最基本的TextField:

/* * Created by 李卓原 on 2018/9/7. * email: zhuoyuan93@gmail.com * */ import 'package:flutter/material.dart';class TextFieldAndCheckPage extends StatefulWidget { @override State<StatefulWidget> createState() => TextFieldAndCheckPageState();}class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> { @override Widget build(BuildContext context) {  return Scaffold(appBar: AppBar(   title: Text('輸入和選擇'),  ),body:TextField(),  ); }}

這是一個默認的輸入框,我們什么都沒有做的時候的樣子.

然后我們試一下它的屬性

TextField(    keyboardType: TextInputType.number,    decoration: InputDecoration(     contentPadding: EdgeInsets.all(10.0),     icon: Icon(Icons.text_fields),     labelText: '請輸入你的姓名)',     helperText: '請輸入你的真實姓名',    ),    onChanged: _textFieldChanged,    autofocus: false,   ), void _textFieldChanged(String str) {  print(str); }

我們增加一個keyboardType屬性，把keyboardType設置為TextInputType.number

可以看到每次我們讓TextField獲得焦點的時候彈出的鍵盤就變成了數字優先了。

然后我們為輸入框做一些其他的效果，如提示文字，icon、標簽文字等。

我們給上面的代碼新增decoration屬性，設置相關屬性，可以發現當我們的TextField獲得焦點時，圖標會自動變色，提示文字會自動上移。

還可以看到 我加了一個onChanged。

onChanged是每次輸入框內每次文字變更觸發的回調，onSubmitted是用戶提交而觸發的回調。

每當用戶改變輸入框內的文字，都會在控制臺輸出現在的字符串.與onSubmitted用法相同.

接下來，我們實現一個簡單的登錄頁面:

/* * Created by 李卓原 on 2018/9/7. * email: zhuoyuan93@gmail.com * */import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class TextFieldAndCheckPage extends StatefulWidget { @override State<StatefulWidget> createState() => TextFieldAndCheckPageState();}class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> { //手機號的控制器 TextEditingController phoneController = TextEditingController(); //密碼的控制器 TextEditingController passController = TextEditingController(); @override Widget build(BuildContext context) {  return Scaffold(   appBar: AppBar(    title: Text('輸入和選擇'),   ),   body: Column(    children: <Widget>[     TextField(      controller: phoneController,      keyboardType: TextInputType.number,      decoration: InputDecoration(       contentPadding: EdgeInsets.all(10.0),       icon: Icon(Icons.phone),       labelText: '請輸入你的用戶名)',       helperText: '請輸入注冊的手機號',      ),      autofocus: false,     ),     TextField(       controller: passController,       keyboardType: TextInputType.number,       decoration: InputDecoration(        contentPadding: EdgeInsets.all(10.0),        icon: Icon(Icons.lock),        labelText: '請輸入密碼)',       ),       obscureText: true),     RaisedButton(      onPressed: _login,      child: Text('登錄'),     ),    ],   ),  ); } void _login() {  print({'phone': phoneController.text, 'password': passController.text});  if (phoneController.text.length != 11) {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('手機號碼格式不對'),       ));  } else if (passController.text.length == 0) {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('請填寫密碼'),       ));  } else {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('登錄成功'),       ));   phoneController.clear();  } } void onTextClear() {  setState(() {   phoneController.clear();   passController.clear();  }); }}

在布局上，我們使用一個Column包含了兩個TextField和一個RaisedButton。

在邏輯上，每當我們點擊下面的按鈕都會判斷用戶名密碼是否符合要求，并且使用控制器清空已經輸入的用戶名和密碼。

當用戶輸入的手機號碼不是11位的時候提示手機號碼格式錯誤，

當用戶沒有輸入密碼時，提示填寫密碼，

用戶名和密碼符合要求時提示登錄成功。

我這里登錄成功之后還調了一個方法：phoneController.clear() 清空了用戶名輸入框中的內容。

代碼的邏輯很簡單。關于TextField的其他用法就不在一一介紹了，有興趣的小伙伴可以自己嘗試下.

使用decoration美化輸入框

先看一下效果：

代碼：

TextField(      controller: accountController,      decoration: InputDecoration(       border: OutlineInputBorder(),       hintText: '請輸入賬號',       labelText: '左上角',       prefixIcon: Icon(Icons.person),      ),     )

可以看到，我先添加了一個decoration屬性.

decoration屬性介紹:

border：增加一個邊框，  hintText：未輸入文字時，輸入框中的提示文字，  prefixIcon：輸入框內側左面的控件，  labelText：一個提示文字。輸入框獲取焦點/輸入框有內容 會移動到左上角，否則在輸入框內，labelTex的位置.  suffixIcon: 輸入框內側右面的圖標.  icon : 輸入框左側添加個圖標

在多個輸入框內切換焦點

介紹一下onEditingComplete這個方法:

當用戶提交可編輯內容時調用(例如，用戶按下鍵盤上的“done”按鈕)。

onEditingComplete的默認實現根據情況執行2種不同的行為:

當完成操作被按下時，例如“done”、“go”、“send”或“search”，用戶的內容被提交給[controller]，然后焦點被放棄。  當按下一個未完成操作(如“next”或“previous”)時，用戶的內容被提交給[controller]，但不會放棄焦點，因為開發人員可能希望立即將焦點轉移到[onsubmit]中的另一個輸入小部件。

我們有時候會需要這樣的情況, 比如一個登錄頁面, 需要輸入賬號和密碼 , 自然輸入完賬號就要輸入密碼了 , 我們在輸入賬號結束的時候 , 讓密碼輸入框獲取到焦點 .

看一下代碼:

... FocusNode secondTextFieldNode = FocusNode();...Column(    children: <Widget>[     TextField(      /* onChanged: (text) {     value = text;     print(value);    },*/      autofocus: false, //是否自動獲取焦點      controller: _textController,      decoration: InputDecoration(       suffixIcon: Icon(Icons.chevron_right), //輸入框內右側圖標       icon: Icon(Icons.person), //輸入框左側圖標       prefixIcon: Icon(Icons.skip_previous), //輸入框內左側圖標       labelText: 'labelText',       hintText: 'hintText',       helperText: 'helperText',      ),      onEditingComplete: () =>        FocusScope.of(context).requestFocus(secondTextFieldNode),     ),     TextField(      focusNode: secondTextFieldNode,      decoration: InputDecoration(        contentPadding: EdgeInsets.symmetric(horizontal: 15.0)),     ),    ],   ),

我在頂層創建了一個交電接點并附加給第二個輸入框,

在第一個輸入框的onEditingComplete方法中是用

FocusScope.of(context).requestFocus(secondTextFieldNode),

方法來讓第二個輸入框請求獲取焦點,

當然你也可以添加個按鈕 , 點擊按鈕執行這個方法來實現切換焦點的功能.

keyboardType

TextField成為焦點時顯示的鍵盤類型。

TextField( keyboardType: TextInputType.number,),

類型是：

TextInputType.text（普通完整鍵盤）  TextInputType.number（數字鍵盤）  TextInputType.emailAddress（帶有“@”的普通鍵盤）  TextInputType.datetime（帶有“/”和“：”的數字鍵盤）  TextInputType.multiline（帶有選項以啟用有符號和十進制模式的數字鍵盤）

TextInputAction

更改TextField的textInputAction可以更改鍵盤本身的操作按鈕。

TextField( textInputAction: TextInputAction.search,),

這會導致“完成”按鈕被“搜索”按鈕替換：

TextCapitalization

TextField提供了一些有關如何使用戶輸入中的字母大寫的選項。

TextCapitalization.sentences : 這是我們期望的正常類型的大寫，每個句子的首字母大寫。

TextCapitalization.characters:大寫句子中的所有字符。

TextCapitalization.words : 將每個單詞的首字母大寫。

更改TextField中的光標

可以直接從TextField小部件自定義游標。

可以更改角落的光標顏色，寬度和半徑。

例如，這里我沒有明顯的原因制作一個圓形的紅色光標。

TextField( cursorColor: Colors.red, cursorRadius: Radius.circular(16.0), cursorWidth: 16.0,),

控制TextField中的大小和最大長度

TextFields可以控制在其中寫入的最大字符數，最大行數并在鍵入文本時展開。

TextField( maxLength: 4,),

通過設置maxLength屬性，將強制執行最大長度，并且默認情況下會將計數器添加到TextField。

上述就是小編為大家分享的flutter中如何使用TextField輸入框組件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。