Flutter TextField

版權(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 瞎扯 如題,文本輸入.沒(méi)啥好扯的. Input TextField 是最常用的文本輸入widget. 默認(rèn)情況下，...
    Jlanglang閱讀 1,255評(píng)論 0贊 1
  • 實(shí)現(xiàn)TextField說(shuō)簡(jiǎn)單也簡(jiǎn)單，說(shuō)有坑，坑也不小，下面從易到難介紹一下使用 1.最簡(jiǎn)單的就是無(wú)參數(shù)調(diào)用構(gòu)造方法...
    Realank閱讀 96,478評(píng)論 20贊 64
  • 一個(gè)material design的文本字段。1、文本字段允許用戶使用硬件鍵盤或屏幕鍵盤輸入文本。 只要用戶更改字...
    _白羊閱讀 9,028評(píng)論 0贊 2
  • TextField 是一個(gè)文本輸入組件，類似 Web 上的 Input。 TextField 有以下常用屬性： a...
    iwakevin閱讀 26,026評(píng)論 1贊 8
  • 我很喜歡你，可，那又怎么樣呢，終究是習(xí)慣了孤獨(dú)
    L小姐嘚一米陽(yáng)光閱讀 142評(píng)論 0贊 0