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

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

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

TextField

顧名思義文本輸入框，類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過(guò)這個(gè)功能，就不在做具體介紹了，接下來(lái)還是具體介紹下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)容時(shí)調(diào)用  this.inputFormatters,  this.enabled,  this.cursorWidth = 2.0,  this.cursorRadius,  this.cursorColor,  this.keyboardAppearance, })

先來(lái)試試最基本的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(),  ); }}

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

然后我們?cè)囈幌滤膶傩?/p>

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

我們?cè)黾右粋€(gè)keyboardType屬性，把keyboardType設(shè)置為TextInputType.number

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

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

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

還可以看到 我加了一個(gè)onChanged。

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

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

接下來(lái)，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄頁(yè)面:

/* * 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> { //手機(jī)號(hào)的控制器 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: '請(qǐng)輸入你的用戶名)',       helperText: '請(qǐng)輸入注冊(cè)的手機(jī)號(hào)',      ),      autofocus: false,     ),     TextField(       controller: passController,       keyboardType: TextInputType.number,       decoration: InputDecoration(        contentPadding: EdgeInsets.all(10.0),        icon: Icon(Icons.lock),        labelText: '請(qǐng)輸入密碼)',       ),       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('手機(jī)號(hào)碼格式不對(duì)'),       ));  } else if (passController.text.length == 0) {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('請(qǐng)?zhí)顚?xiě)密碼'),       ));  } else {   showDialog(     context: context,     builder: (context) => AlertDialog(        title: Text('登錄成功'),       ));   phoneController.clear();  } } void onTextClear() {  setState(() {   phoneController.clear();   passController.clear();  }); }}

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

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

當(dāng)用戶輸入的手機(jī)號(hào)碼不是11位的時(shí)候提示手機(jī)號(hào)碼格式錯(cuò)誤，

當(dāng)用戶沒(méi)有輸入密碼時(shí)，提示填寫(xiě)密碼，

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

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

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

使用decoration美化輸入框

先看一下效果：

代碼：

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

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

decoration屬性介紹:

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

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

介紹一下onEditingComplete這個(gè)方法:

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

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

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

我們有時(shí)候會(huì)需要這樣的情況, 比如一個(gè)登錄頁(yè)面, 需要輸入賬號(hào)和密碼 , 自然輸入完賬號(hào)就要輸入密碼了 , 我們?cè)谳斎胭~號(hào)結(jié)束的時(shí)候 , 讓密碼輸入框獲取到焦點(diǎn) .

看一下代碼:

... FocusNode secondTextFieldNode = FocusNode();...Column(    children: <Widget>[     TextField(      /* onChanged: (text) {     value = text;     print(value);    },*/      autofocus: false, //是否自動(dòng)獲取焦點(diǎn)      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)建了一個(gè)交電接點(diǎn)并附加給第二個(gè)輸入框,

在第一個(gè)輸入框的onEditingComplete方法中是用

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

方法來(lái)讓第二個(gè)輸入框請(qǐng)求獲取焦點(diǎn),

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

keyboardType

TextField成為焦點(diǎn)時(shí)顯示的鍵盤類型。

TextField( keyboardType: TextInputType.number,),

類型是：

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

TextInputAction

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

TextField( textInputAction: TextInputAction.search,),

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

TextCapitalization

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

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

TextCapitalization.characters:大寫(xiě)句子中的所有字符。

TextCapitalization.words : 將每個(gè)單詞的首字母大寫(xiě)。

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

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

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

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

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

控制TextField中的大小和最大長(zhǎng)度

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

TextField( maxLength: 4,),

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

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

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

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

廣告

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