這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)flutter中如何使用TextField輸入框組件,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)公司提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì),品牌網(wǎng)站建設(shè),廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作,10多年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè),成功案例突破近千家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.
TextField
顧名思義文本輸入框,類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過這個(gè)功能,就不在做具體介紹了,接下來還是具體介紹下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, })
先來試試最基本的TextField:
/* * Created by 李卓原 on 2018/9/7. * email: zhuoyuan93@gmail.com * */ import 'package:flutter/material.dart';class TextFieldAndCheckPage extends StatefulWidget { @override State
這是一個(gè)默認(rèn)的輸入框,我們什么都沒有做的時(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
用法相同.
接下來,我們實(shí)現(xiàn)一個(gè)簡單的登錄頁面:
/* * 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
在布局上,我們使用一個(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)用戶沒有輸入密碼時(shí),提示填寫密碼,
用戶名和密碼符合要求時(shí)提示登錄成功。
我這里登錄成功之后還調(diào)了一個(gè)方法:phoneController.clear()
清空了用戶名輸入框中的內(nèi)容。
代碼的邏輯很簡單。關(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)殚_發(fā)人員可能希望立即將焦點(diǎn)轉(zhuǎn)移到[onsubmit]中的另一個(gè)輸入小部件。
我們有時(shí)候會(huì)需要這樣的情況, 比如一個(gè)登錄頁面, 需要輸入賬號(hào)和密碼 , 自然輸入完賬號(hào)就要輸入密碼了 , 我們?cè)谳斎胭~號(hào)結(jié)束的時(shí)候 , 讓密碼輸入框獲取到焦點(diǎn) .
看一下代碼:
... FocusNode secondTextFieldNode = FocusNode();...Column( children:
我在頂層創(chuàng)建了一個(gè)交電接點(diǎn)并附加給第二個(gè)輸入框,
在第一個(gè)輸入框的onEditingComplete
方法中是用
FocusScope.of(context).requestFocus(secondTextFieldNode),
方法來讓第二個(gè)輸入框請(qǐng)求獲取焦點(diǎn),
當(dāng)然你也可以添加個(gè)按鈕 , 點(diǎn)擊按鈕執(zhí)行這個(gè)方法來實(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àng)。
TextCapitalization.sentences : 這是我們期望的正常類型的大寫,每個(gè)句子的首字母大寫。
TextCapitalization.characters:大寫句子中的所有字符。
TextCapitalization.words : 將每個(gè)單詞的首字母大寫。
更改TextField中的光標(biāo)
可以直接從TextField小部件自定義游標(biāo)。
可以更改角落的光標(biāo)顏色,寬度和半徑。
例如,這里我沒有明顯的原因制作一個(gè)圓形的紅色光標(biāo)。
TextField( cursorColor: Colors.red, cursorRadius: Radius.circular(16.0), cursorWidth: 16.0,),
控制TextField中的大小和最大長度
TextFields可以控制在其中寫入的最大字符數(shù),最大行數(shù)并在鍵入文本時(shí)展開。
TextField( maxLength: 4,),
通過設(shè)置maxLength屬性,將強(qiáng)制執(zhí)行最大長度,并且默認(rèn)情況下會(huì)將計(jì)數(shù)器添加到TextField。
上述就是小編為大家分享的flutter中如何使用TextField輸入框組件了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。