這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)flutter中如何使用TextField輸入框組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計，品牌網(wǎng)站建設(shè)，廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10多年的網(wǎng)站開發(fā)和建站經(jīng)驗,助力企業(yè)信息化建設(shè)，成功案例突破近千家,是您實現(xiàn)網(wǎng)站建設(shè)的好選擇.

TextField

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

以下內(nèi)容已更新到 github

TextField的構(gòu)造方法：

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,      //文字改變觸發(fā)  this.onSubmitted,     //文字提交觸發(fā)（鍵盤按鍵）  this.onEditingComplete, //當(dāng)用戶提交可編輯內(nèi)容時調(diào)用  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(),  ); }}

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

然后我們試一下它的屬性

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設(shè)置為TextInputType.number

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

然后我們?yōu)檩斎肟蜃鲆恍┢渌男Ч?，如提示文字，icon、標(biāo)簽文字等。

我們給上面的代碼新增decoration屬性，設(shè)置相關(guān)屬性，可以發(fā)現(xiàn)當(dāng)我們的TextField獲得焦點時，圖標(biāo)會自動變色，提示文字會自動上移。

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

onChanged是每次輸入框內(nèi)每次文字變更觸發(fā)的回調(diào)，onSubmitted是用戶提交而觸發(fā)的回調(diào)。

每當(dāng)用戶改變輸入框內(nèi)的文字，都會在控制臺輸出現(xiàn)在的字符串.與onSubmitted用法相同.

接下來，我們實現(xiàn)一個簡單的登錄頁面:

/* * 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('請?zhí)顚懨艽a'),       ));  } else {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('登錄成功'),       ));   phoneController.clear();  } } void onTextClear() {  setState(() {   phoneController.clear();   passController.clear();  }); }}

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

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

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

當(dāng)用戶沒有輸入密碼時，提示填寫密碼，

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

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

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

使用decoration美化輸入框

先看一下效果：

代碼：

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

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

decoration屬性介紹:

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

在多個輸入框內(nèi)切換焦點

介紹一下onEditingComplete這個方法:

當(dāng)用戶提交可編輯內(nèi)容時調(diào)用(例如，用戶按下鍵盤上的“done”按鈕)。

onEditingComplete的默認(rèn)實現(xiàn)根據(jù)情況執(zhí)行2種不同的行為:

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

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

看一下代碼:

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

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

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

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

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

當(dāng)然你也可以添加個按鈕 , 點擊按鈕執(zhí)行這個方法來實現(xiàn)切換焦點的功能.

keyboardType

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

TextField( keyboardType: TextInputType.number,),

類型是：

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

TextInputAction

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

TextField( textInputAction: TextInputAction.search,),

這會導(dǎo)致“完成”按鈕被“搜索”按鈕替換：

TextCapitalization

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

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

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

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

更改TextField中的光標(biāo)

可以直接從TextField小部件自定義游標(biāo)。

可以更改角落的光標(biāo)顏色，寬度和半徑。

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

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

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

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

TextField( maxLength: 4,),

通過設(shè)置maxLength屬性，將強制執(zhí)行最大長度，并且默認(rèn)情況下會將計數(shù)器添加到TextField。

上述就是小編為大家分享的flutter中如何使用TextField輸入框組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：flutter中如何使用TextField輸入框組件
地址分享：http://m.rwnh.cn/article12/jejpdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、小程序開發(fā)、網(wǎng)站設(shè)計、用戶體驗、外貿(mào)建站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)