flutter 輸入框組件TextField的實(shí)現(xiàn)代碼
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<StatefulWidget> createState() => TextFieldAndCheckPageState();
}
class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(
title: Text('輸入和選擇'),
),body:TextField(),
);
}
}
這是一個(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è)簡(jiǎ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> {
//手機(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í)顚懨艽a'),
));
} 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)用戶沒有輸入密碼時(shí)，提示填寫密碼，
用戶名和密碼符合要求時(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)殚_發(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: <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),
方法來讓第二個(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中的大小和最大長(zhǎng)度
TextFields可以控制在其中寫入的最大字符數(shù)，最大行數(shù)并在鍵入文本時(shí)展開。
TextField( maxLength: 4, ),
通過設(shè)置maxLength屬性，將強(qiáng)制執(zhí)行最大長(zhǎng)度，并且默認(rèn)情況下會(huì)將計(jì)數(shù)器添加到TextField。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Android添加fragment后版本不兼容問題
這篇文章主要介紹了Android添加fragment后版本不兼容問題的解決方法,需要的朋友可以參考下2017-12-12
Android 深入探究自定義view之事件的分發(fā)機(jī)制與處理詳解
對(duì)于安卓程序員來說，自定義view簡(jiǎn)直不要太重要，畢竟有很多功能，譬如圓形頭像這些，用單純的原生非常難以實(shí)現(xiàn)，而用自定義view，簡(jiǎn)直分分鐘2021-11-11
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)掃描二維碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Android studio有關(guān)側(cè)滑的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android studio有關(guān)側(cè)滑的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
android獲取監(jiān)聽SD Card狀態(tài)的方法
這篇文章主要介紹了android獲取監(jiān)聽SD Card狀態(tài)的方法,涉及Android實(shí)現(xiàn)SD Card監(jiān)聽的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
Android在類微信程序中實(shí)現(xiàn)藍(lán)牙聊天功能的示例代碼
這篇文章主要介紹了Android在類微信程序中實(shí)現(xiàn)藍(lán)牙聊天功能,本文通過實(shí)例代碼給大家介紹的非常想詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Android實(shí)現(xiàn)客戶端語音動(dòng)彈界面實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)客戶端語音動(dòng)彈界面實(shí)例代碼,文章只給大家介紹了控件布局的方法，需要的朋友可以參考下2017-11-11
Android studio 實(shí)現(xiàn)隨機(jī)位置畫10個(gè)隨機(jī)大小的五角星的代碼
這篇文章主要介紹了Android studio 實(shí)現(xiàn)隨機(jī)位置畫10個(gè)隨機(jī)大小的五角星，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Android自定義圓環(huán)倒計(jì)時(shí)控件
這篇文章主要為大家詳細(xì)介紹了Android自定義圓環(huán)倒計(jì)時(shí)控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Android自定義ActionProvider ToolBar實(shí)現(xiàn)Menu小紅點(diǎn)
這篇文章主要介紹了Android自定義ActionProvider ToolBar實(shí)現(xiàn)Menu小紅點(diǎn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09