版權(quán)聲明:本文為博主原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。
本文鏈接:https://blog.csdn.net/yechaoa/article/details/90906689
文章目錄
基本屬性
TextField
InputDecoration
樣式
基礎(chǔ)樣式
隱藏文本
鍵盤類型
鍵盤按鈕
大小寫(xiě)
光標(biāo)
最多行數(shù)
計(jì)數(shù)器
圖標(biāo)
提示文字
去除下劃線
邊框
獲取輸入內(nèi)容
關(guān)閉軟鍵盤
校驗(yàn)
異常
總結(jié)
github:https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
效果:
終于還是對(duì)TextField下手了,這個(gè)屬性最多、功能點(diǎn)最多的Widget。
基本屬性
TextField是一個(gè)material design風(fēng)格的輸入框,本身有多種屬性,除此之外裝飾器InputDecoration也有多種屬性,但都比較簡(jiǎn)單,所以不必?fù)?dān)心,且聽(tīng)我娓娓道來(lái)。
先看一下源碼,重要或常用的屬性會(huì)有注釋。
TextField
const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦點(diǎn)
this.decoration = const InputDecoration(),//裝飾
TextInputType keyboardType,//鍵盤類型,即輸入類型
this.textInputAction,//鍵盤按鈕
this.textCapitalization = TextCapitalization.none,//大小寫(xiě)
this.style,//樣式
this.strutStyle,
this.textAlign = TextAlign.start,//對(duì)齊方式
this.textDirection,
this.autofocus = false,//自動(dòng)聚焦
this.obscureText = false,//是否隱藏文本,即顯示密碼類型
this.autocorrect = true,//自動(dòng)更正
this.maxLines = 1,//最多行數(shù),高度與行數(shù)同步
this.minLines,//最小行數(shù)
this.expands = false,
this.maxLength,//最多輸入數(shù),有值后右下角就會(huì)有一個(gè)計(jì)數(shù)器
this.maxLengthEnforced = true,
this.onChanged,//輸入改變回調(diào)
this.onEditingComplete,//輸入完成時(shí),配合TextInputAction.done使用
this.onSubmitted,//提交時(shí),配合TextInputAction
this.inputFormatters,//輸入校驗(yàn)
this.enabled,//是否可用
this.cursorWidth = 2.0,//光標(biāo)寬度
this.cursorRadius,//光標(biāo)圓角
this.cursorColor,//光標(biāo)顏色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//點(diǎn)擊事件
this.buildCounter,
this.scrollPhysics,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
參數(shù)很多,其實(shí)日常開(kāi)發(fā)中連一半的屬性都用不到,但還是會(huì)盡量多的介紹。
InputDecoration
const InputDecoration({
this.icon,//左側(cè)外的圖標(biāo)
this.labelText,//懸浮提示,可代替hintText
this.labelStyle,//懸浮提示文字的樣式
this.helperText,//幫助文字
this.helperStyle,
this.hintText,//輸入提示
this.hintStyle,
this.hintMaxLines,
this.errorText,//錯(cuò)誤提示
this.errorStyle,
this.errorMaxLines,
this.hasFloatingPlaceholder = true,//是否顯示懸浮提示文字
this.isDense,
this.contentPadding,//內(nèi)填充
this.prefixIcon,//左側(cè)內(nèi)的圖標(biāo)
this.prefix,
this.prefixText,//左側(cè)內(nèi)的文字
this.prefixStyle,
this.suffixIcon,//右側(cè)內(nèi)圖標(biāo)
this.suffix,
this.suffixText,
this.suffixStyle,
this.counter,//自定義計(jì)數(shù)器
this.counterText,//計(jì)數(shù)文字
this.counterStyle,//計(jì)數(shù)樣式
this.filled,//是否填充
this.fillColor,//填充顏色
this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border,//邊框
this.enabled = true,
this.semanticCounterText,
this.alignLabelWithHint,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
參數(shù)很多,多為一個(gè)小功能點(diǎn)的圖標(biāo)、文字和樣式,并不復(fù)雜。
ok,基本屬性大概過(guò)一遍,腦子里有個(gè)印象就行了。下面開(kāi)始實(shí)操。
樣式
基礎(chǔ)樣式
TextField(),
1
很簡(jiǎn)單,無(wú)任何參數(shù),當(dāng)然效果也很簡(jiǎn)單。
style可以修改樣式。
隱藏文本
修改obscureText屬性值
TextField(
obscureText: true,
),
1
2
3
可以看到輸入的內(nèi)容已經(jīng)不可見(jiàn)了,變成常見(jiàn)的密碼類型了。
鍵盤類型
鍵盤類型 即 可輸入的類型,比如number就只能輸入數(shù)字
TextField(
keyboardType: TextInputType.number,
),
1
2
3
TextInputType可選類型:
text
multiline
number
phone
datetime
emailAddress
url
鍵盤按鈕
即鍵盤右下角的按鈕,常見(jiàn)的比如完成,右下角是一個(gè)完成的對(duì)號(hào)按鈕,上圖即是。
TextField(
textInputAction: TextInputAction.done,
),
1
2
3
TextInputAction其他選項(xiàng):
none
unspecified
done
go
search
send
next
previous
continueAction
join
route
emergencyCall
newline
大小寫(xiě)
即控制輸入的英文字母大小寫(xiě),比如單詞首字母大寫(xiě)
TextField(
textCapitalization: TextCapitalization.words,
),
1
2
3
TextCapitalization的其他選項(xiàng):
words:?jiǎn)卧~首字母大寫(xiě)
sentences:句子的首字母大寫(xiě)
characters:所有字母大寫(xiě)
none:默認(rèn)無(wú)
光標(biāo)
默認(rèn)是一個(gè)藍(lán)色的豎線
TextField(
cursorColor: Colors.orange,
cursorWidth: 15,
cursorRadius: Radius.circular(15),
),
1
2
3
4
5
最多行數(shù)
設(shè)置最多3行
TextField(
maxLines: 3,
),
1
2
3
從效果可以看出,TextField高度已經(jīng)變成了3行。但是我只是想最多輸入3行,默認(rèn)還是1行的高度怎么辦呢?
不用慌,加一個(gè)參數(shù)就行了: minLines
TextField(
maxLines: 3,
minLines: 1,
),
1
2
3
4
可以看到,TextField的高度是會(huì)自適應(yīng)的。
計(jì)數(shù)器
即右下角會(huì)有一個(gè)計(jì)數(shù)
TextField(
maxLength: 8,
),
1
2
3
默認(rèn):當(dāng)前輸入長(zhǎng)度/最大長(zhǎng)度,那這個(gè)地方我們能不能改呢,當(dāng)然可以,下面簡(jiǎn)單操作一下
TextField(
maxLength: 8,
decoration: InputDecoration(
counter: Text("自定義計(jì)數(shù) 0/100"),
),
),
1
2
3
4
5
6
這里我用到了裝飾InputDecoration下的counter,類型是widget,那擴(kuò)展度就相當(dāng)高了,我只用了一個(gè)Text,別的widget也是可以的。
如果只是純文字的話,InputDecoration下還有一個(gè)counterText屬性和counterStyle。
圖標(biāo)
圖標(biāo)有3種:
左側(cè)外的圖標(biāo)
TextField(
decoration: InputDecoration(
icon: Icon(Icons.person),
),
),
1
2
3
4
5
左側(cè)內(nèi)圖標(biāo)
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
),
),
1
2
3
4
5
右側(cè)內(nèi)圖標(biāo)
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
controller.clear();
},
),
),
),
1
2
3
4
5
6
7
8
9
10
在右側(cè)圖標(biāo)加了一個(gè)IconButton,因?yàn)閹в悬c(diǎn)擊事件,我們可以在點(diǎn)擊的時(shí)候清除TextField中的內(nèi)容。
以上就是圖標(biāo)的介紹,其實(shí)除了圖標(biāo)之外,對(duì)應(yīng)的位置也可以顯示文字或者自定義顯示其他widget
比如出了prefixIcon之外還有其他3個(gè)屬性,用法跟上面介紹到的自定義計(jì)數(shù)器是一樣的。
this.prefix,
this.prefixText,
this.prefixStyle,
1
2
3
提示文字
提示文字有4種:
輸入提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '請(qǐng)輸入賬號(hào)aaa',
),
),
1
2
3
4
5
6
懸浮提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '請(qǐng)輸入賬號(hào)aaa',
labelText: '請(qǐng)輸入賬號(hào)',
),
),
1
2
3
4
5
6
7
可以看到,默認(rèn)顯示labelText,聚焦之后才顯示hintText,所以labelText是可以取代hintText的。
幫助提示文字
TextField(
controller: controller,
decoration: InputDecoration(
helperText: "幫助文字",
helperStyle: TextStyle(color: Colors.blue)
),
),
1
2
3
4
5
6
7
一直顯示在左下方
錯(cuò)誤提示文字
TextField(
controller: controller,
decoration: InputDecoration(
errorText: "你沒(méi)有輸入任何內(nèi)容",
),
),
1
2
3
4
5
6
去除下劃線
TextField(
decoration: InputDecoration.collapsed(hintText: "無(wú)下劃線的輸入框"),
),
1
2
3
也可以decoration: null, 差別就是沒(méi)有hintText了
邊框
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
1
2
3
4
5
如果這個(gè)圓角不喜歡的話,也可以改一下的,比如:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
),
),
1
2
3
4
5
6
7
獲取輸入內(nèi)容
有兩種方式:
onChanged
onChanged是輸入內(nèi)容改變時(shí)的回調(diào),返回一個(gè)String類型的數(shù)值,可以用一個(gè)變量記一下
TextField(
onChanged: (text) {
print("輸入改變時(shí)" + text);
},
),
1
2
3
4
5
controller
即控制器,初始化:
var controller;
@override
void initState() {
super.initState();
controller = TextEditingController();
controller.addListener(() {});
}
1
2
3
4
5
6
7
8
配置給TextField
TextField(
controller: controller,
),
1
2
3
獲取內(nèi)容
controller.text
1
在事件中調(diào)用controller.text即返回輸入內(nèi)容。
關(guān)閉軟鍵盤
往往我們?cè)谑录刑峤坏臅r(shí)候,是需要關(guān)閉軟鍵盤的
這里我們就用到了focusNode
初始化:
FocusNode userFocusNode = FocusNode();
1
配置:
TextField(
focusNode: userFocusNode,
),
1
2
3
然后在需要的地方調(diào)用:
userFocusNode.unfocus();
1
校驗(yàn)
校驗(yàn)的話其實(shí)有個(gè)inputFormatters屬性
final List<TextInputFormatter> inputFormatters;
1
繼續(xù)看TextInputFormatter源碼,有3個(gè)子類:
BlacklistingTextInputFormatter
WhitelistingTextInputFormatter
LengthLimitingTextInputFormatter
黑名單、白名單和長(zhǎng)度限制,我們隨便找一個(gè)看一下源碼是怎么實(shí)現(xiàn)校驗(yàn)的:
往下看會(huì)看到這么一段代碼:
static final BlacklistingTextInputFormatter singleLineFormatter
= BlacklistingTextInputFormatter(RegExp(r'\n'));
1
2
關(guān)鍵詞在RegExp,其實(shí)就是我們一般用的正則表達(dá)式而已。
這樣的話,我們也可以自定義校驗(yàn)規(guī)則了,比如校驗(yàn)手機(jī)號(hào):
String validateMobile(String value) {
String patttern = r'(^[0-9]*$)';
RegExp regExp = new RegExp(patttern);
if (value.length == 0) {
return "手機(jī)號(hào)為空";
} else if (!regExp.hasMatch(value)) {
return "手機(jī)號(hào)格式不正確";
}
return null;
}
1
2
3
4
5
6
7
8
9
10
以上只是我們一般的校驗(yàn),表單的話還是建議使用From包裹TextFormField
異常
軟鍵盤彈出之后遮蓋
軟鍵盤彈出之后高度溢出
解決辦法:用滑動(dòng)組件包裹起來(lái)(ListView等),這樣軟鍵盤彈出的時(shí)候,輸入框也會(huì)自動(dòng)向上滑。
總結(jié)
以上就是全部介紹了,然后寫(xiě)了個(gè)登錄注冊(cè)的小demo:
github:https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
官方文檔:https://api.flutter.dev/flutter/material/TextField-class.html