版權(quán)聲明：本文為博主原創(chuàng)文章乙墙，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明掌实。
本文鏈接：https://blog.csdn.net/yechaoa/article/details/90906689
文章目錄
基本屬性
TextField
InputDecoration
樣式
基礎樣式
隱藏文本
鍵盤類型
鍵盤按鈕
大小寫
光標
最多行數(shù)
計數(shù)器
圖標
提示文字
去除下劃線
邊框
獲取輸入內(nèi)容
關(guān)閉軟鍵盤
校驗
異常
總結(jié)
github：https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
效果：

終于還是對TextField下手了陪蜻，這個屬性最多、功能點最多的Widget贱鼻。

基本屬性
TextField是一個material design風格的輸入框宴卖，本身有多種屬性，除此之外裝飾器InputDecoration也有多種屬性邻悬，但都比較簡單症昏，所以不必擔心，且聽我娓娓道來父丰。

先看一下源碼肝谭，重要或常用的屬性會有注釋。

TextField
const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦點
this.decoration = const InputDecoration(),//裝飾
TextInputType keyboardType,//鍵盤類型蛾扇，即輸入類型
this.textInputAction,//鍵盤按鈕
this.textCapitalization = TextCapitalization.none,//大小寫
this.style,//樣式
this.strutStyle,
this.textAlign = TextAlign.start,//對齊方式
this.textDirection,
this.autofocus = false,//自動聚焦
this.obscureText = false,//是否隱藏文本攘烛，即顯示密碼類型
this.autocorrect = true,//自動更正
this.maxLines = 1,//最多行數(shù)，高度與行數(shù)同步
this.minLines,//最小行數(shù)
this.expands = false,
this.maxLength,//最多輸入數(shù)屁桑，有值后右下角就會有一個計數(shù)器
this.maxLengthEnforced = true,
this.onChanged,//輸入改變回調(diào)
this.onEditingComplete,//輸入完成時医寿，配合TextInputAction.done使用
this.onSubmitted,//提交時,配合TextInputAction
this.inputFormatters,//輸入校驗
this.enabled,//是否可用
this.cursorWidth = 2.0,//光標寬度
this.cursorRadius,//光標圓角
this.cursorColor,//光標顏色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//點擊事件
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ù)很多，其實日常開發(fā)中連一半的屬性都用不到蘑斧，但還是會盡量多的介紹。

InputDecoration
const InputDecoration({
this.icon,//左側(cè)外的圖標
this.labelText,//懸浮提示，可代替hintText
this.labelStyle,//懸浮提示文字的樣式
this.helperText,//幫助文字
this.helperStyle,
this.hintText,//輸入提示
this.hintStyle,
this.hintMaxLines,
this.errorText,//錯誤提示
this.errorStyle,
this.errorMaxLines,
this.hasFloatingPlaceholder = true,//是否顯示懸浮提示文字
this.isDense,
this.contentPadding,//內(nèi)填充
this.prefixIcon,//左側(cè)內(nèi)的圖標
this.prefix,
this.prefixText,//左側(cè)內(nèi)的文字
this.prefixStyle,
this.suffixIcon,//右側(cè)內(nèi)圖標
this.suffix,
this.suffixText,
this.suffixStyle,
this.counter,//自定義計數(shù)器
this.counterText,//計數(shù)文字
this.counterStyle,//計數(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ù)很多竖瘾，多為一個小功能點的圖標沟突、文字和樣式，并不復雜捕传。

ok惠拭，基本屬性大概過一遍，腦子里有個印象就行了庸论。下面開始實操职辅。

樣式
基礎樣式
TextField(),
1
很簡單，無任何參數(shù)聂示，當然效果也很簡單域携。

style可以修改樣式。

隱藏文本
修改obscureText屬性值

          TextField(
            obscureText: true,
          ),

1
2
3

可以看到輸入的內(nèi)容已經(jīng)不可見了鱼喉，變成常見的密碼類型了秀鞭。

鍵盤類型
鍵盤類型 即 可輸入的類型，比如number就只能輸入數(shù)字

          TextField(
            keyboardType: TextInputType.number,
          ),

1
2
3

TextInputType可選類型：

text
multiline
number
phone
datetime
emailAddress
url
鍵盤按鈕
即鍵盤右下角的按鈕扛禽，常見的比如完成锋边，右下角是一個完成的對號按鈕，上圖即是编曼。

          TextField(
            textInputAction: TextInputAction.done,
          ),

1
2
3
TextInputAction其他選項：

none
unspecified
done
go
search
send
next
previous
continueAction
join
route
emergencyCall
newline
大小寫
即控制輸入的英文字母大小寫豆巨，比如單詞首字母大寫

          TextField(
            textCapitalization: TextCapitalization.words,
          ),

1
2
3

TextCapitalization的其他選項：

words：單詞首字母大寫
sentences：句子的首字母大寫
characters：所有字母大寫
none：默認無
光標
默認是一個藍色的豎線

          TextField(
            cursorColor: Colors.orange,
            cursorWidth: 15,
            cursorRadius: Radius.circular(15),
          ),

1
2
3
4
5

最多行數(shù)
設置最多3行

          TextField(
            maxLines: 3,
          ),

1
2
3

從效果可以看出，TextField高度已經(jīng)變成了3行掐场。但是我只是想最多輸入3行往扔，默認還是1行的高度怎么辦呢？
不用慌刻肄，加一個參數(shù)就行了： minLines

          TextField(
            maxLines: 3,
            minLines: 1,
          ),

1
2
3
4

可以看到瓤球，TextField的高度是會自適應的。

計數(shù)器
即右下角會有一個計數(shù)

          TextField(
            maxLength: 8,
          ),

1
2
3

默認：當前輸入長度/最大長度敏弃，那這個地方我們能不能改呢卦羡，當然可以，下面簡單操作一下

          TextField(
            maxLength: 8,
            decoration: InputDecoration(
              counter: Text("自定義計數(shù) 0/100"),
            ),
          ),

1
2
3
4
5
6

這里我用到了裝飾InputDecoration下的counter麦到，類型是widget绿饵，那擴展度就相當高了，我只用了一個Text瓶颠，別的widget也是可以的拟赊。

如果只是純文字的話，InputDecoration下還有一個counterText屬性和counterStyle粹淋。

圖標
圖標有3種：

左側(cè)外的圖標
TextField(
decoration: InputDecoration(
icon: Icon(Icons.person),
),
),
1
2
3
4
5

左側(cè)內(nèi)圖標
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
),
),
1
2
3
4
5

右側(cè)內(nèi)圖標
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
controller.clear();
},
),
),
),
1
2
3
4
5
6
7
8
9
10

在右側(cè)圖標加了一個IconButton吸祟，因為帶有點擊事件瑟慈，我們可以在點擊的時候清除TextField中的內(nèi)容。

以上就是圖標的介紹屋匕，其實除了圖標之外葛碧，對應的位置也可以顯示文字或者自定義顯示其他widget
比如出了prefixIcon之外還有其他3個屬性，用法跟上面介紹到的自定義計數(shù)器是一樣的过吻。

this.prefix,
this.prefixText,
this.prefixStyle,

1
2
3
提示文字
提示文字有4種：

輸入提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '請輸入賬號aaa',
),
),
1
2
3
4
5
6

懸浮提示文字
TextField(
controller: controller,
decoration: InputDecoration(
hintText: '請輸入賬號aaa',
labelText: '請輸入賬號',
),
),
1
2
3
4
5
6
7

可以看到进泼，默認顯示labelText，聚焦之后才顯示hintText纤虽，所以labelText是可以取代hintText的乳绕。

幫助提示文字
TextField(
controller: controller,
decoration: InputDecoration(
helperText: "幫助文字",
helperStyle: TextStyle(color: Colors.blue)
),
),
1
2
3
4
5
6
7

一直顯示在左下方

錯誤提示文字
TextField(
controller: controller,
decoration: InputDecoration(
errorText: "你沒有輸入任何內(nèi)容",
),
),
1
2
3
4
5
6

去除下劃線
TextField(
decoration: InputDecoration.collapsed(hintText: "無下劃線的輸入框"),
),
1
2
3

也可以decoration: null, 差別就是沒有hintText了

邊框
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
1
2
3
4
5

如果這個圓角不喜歡的話，也可以改一下的逼纸，比如：

          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(30)),
              ),
            ),
          ),

1
2
3
4
5
6
7

獲取輸入內(nèi)容
有兩種方式：

onChanged
onChanged是輸入內(nèi)容改變時的回調(diào)洋措，返回一個String類型的數(shù)值，可以用一個變量記一下
TextField(
onChanged: (text) {
print("輸入改變時" + 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)閉軟鍵盤
往往我們在事件中提交的時候，是需要關(guān)閉軟鍵盤的

這里我們就用到了focusNode

初始化：

FocusNode userFocusNode = FocusNode();
1
配置：

          TextField(
            focusNode: userFocusNode,
          ),

1
2
3
然后在需要的地方調(diào)用：

userFocusNode.unfocus();
1
校驗
校驗的話其實有個inputFormatters屬性

final List<TextInputFormatter> inputFormatters;
1
繼續(xù)看TextInputFormatter源碼专缠，有3個子類：

BlacklistingTextInputFormatter
WhitelistingTextInputFormatter
LengthLimitingTextInputFormatter
黑名單雷酪、白名單和長度限制，我們隨便找一個看一下源碼是怎么實現(xiàn)校驗的：

往下看會看到這么一段代碼：

static final BlacklistingTextInputFormatter singleLineFormatter
= BlacklistingTextInputFormatter(RegExp(r'\n'));
1
2
關(guān)鍵詞在RegExp涝婉，其實就是我們一般用的正則表達式而已哥力。

這樣的話，我們也可以自定義校驗規(guī)則了墩弯，比如校驗手機號：

String validateMobile(String value) {
String patttern = r'(^[0-9]*$)';
RegExp regExp = new RegExp(patttern);
if (value.length == 0) {
return "手機號為空";
} else if (!regExp.hasMatch(value)) {
return "手機號格式不正確";
}
return null;
}
1
2
3
4
5
6
7
8
9
10
以上只是我們一般的校驗吩跋，表單的話還是建議使用From包裹TextFormField

異常
軟鍵盤彈出之后遮蓋
軟鍵盤彈出之后高度溢出
解決辦法：用滑動組件包裹起來（ListView等），這樣軟鍵盤彈出的時候渔工，輸入框也會自動向上滑锌钮。

總結(jié)
以上就是全部介紹了，然后寫了個登錄注冊的小demo：

github：https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart
官方文檔：https://api.flutter.dev/flutter/material/TextField-class.html