TextField組件在我們?nèi)粘ｉ_(kāi)發(fā)中很常用债鸡，下面就來(lái)總結(jié)一下它的用法诱鞠。
從 TextField 中檢索信息
1.第一種方法是使用 onChanged 方法并將當(dāng)前值存儲(chǔ)在一個(gè)簡(jiǎn)單的變量中肢础。
String value = "";
TextField(
onChanged: (text) {
value = text;
},
)
2.第二種方法是使用 TextEditingController喂分【奂伲控制器附加到 TextField 上块蚌，讓我們監(jiān)聽(tīng)和控制 TextField 的文本。
TextEditingController controller = TextEditingController();
TextField(
controller: controller,
)
print(controller.text);//輸出當(dāng)前TextField的值
TextField 的其他回調(diào)
///這些是在用戶單擊 iOS 上的“完成”按鈕時(shí)調(diào)用的回調(diào)
onEditingComplete: () {},
onSubmitted: (value) {},
在 TextFields 中使用焦點(diǎn)
1.使用自動(dòng)對(duì)焦
TextField(
autofocus: true,
)
2.改變自定義焦點(diǎn)
1_vMJw-_qx5DjX7Q3NZ5TTbg.gif
///點(diǎn)擊RaisedButton時(shí)可以切換下一個(gè)TextField
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();
TextField(
focusNode: nodeOne,
),
TextField(
focusNode: nodeTwo,
),
RaisedButton(
onPressed: () {
FocusScope.of(context).requestFocus(nodeTwo);
},
child: Text("Next Field"),
)
更改 TextFields 的鍵盤(pán)屬性
1.鍵盤(pán)類型
TextInputType.text (普通完整鍵盤(pán))
TextInputType.number (數(shù)字鍵盤(pán))
TextInputType.emailAddress (帶有“@”的普通鍵盤(pán))
TextInputType.datetime (帶有“/”和“ : ”的數(shù)字鍵盤(pán))
TextInputType.numberWithOptions (帶有啟用簽名和十進(jìn)制模式選項(xiàng)的數(shù)字鍵盤(pán))
TextInputType.multiline (優(yōu)化多行信息)
TextField(
keyboardType: TextInputType.number,
)
2.更改鍵盤(pán)本身的操作按鈕
1_YWTJ0wLBtaBJm8XODCG-6g.png
1_Lc7TmV5BlSAdE7a9PKeCYw.png
///這會(huì)導(dǎo)致“完成”按鈕被“繼續(xù)”按鈕取代
TextField(
textInputAction: TextInputAction.continueAction,
)
///這會(huì)導(dǎo)致“完成”按鈕被“發(fā)送”按鈕取代
TextField(
textInputAction: TextInputAction.send,
)
3.自動(dòng)更正
TextField(
autocorrect: false,
)
4.文本大寫(xiě)
2.png
1.png
3.png
TextCapitalization.sentences ///每個(gè)句子的首字母都被大寫(xiě)
TextCapitalization.characters ///句子中的所有字符都大寫(xiě)
TextCapitalization.words ///每個(gè)單詞的首字母大寫(xiě)
TextField(
textCapitalization: TextCapitalization.sentences,
)
文本樣式膘格、對(duì)齊方式和光標(biāo)選項(xiàng)
1.文本字段中的文本對(duì)齊方式
4.png
///這將導(dǎo)致光標(biāo)和文本在 TextField 中間開(kāi)始
TextField(
textAlign: TextAlign.center,
)
2.在 TextField 中設(shè)置文本的樣式
///style 屬性用來(lái)更改 TextField 中文本的外觀峭范、顏色、字體大小等瘪贱。
TextField(
style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
)
3.更改 TextField 中的光標(biāo)
5.png
///更改光標(biāo)顏色纱控，寬度和角的半徑辆毡，這里制作了一個(gè)紅色的圓形光標(biāo)
TextField(
cursorColor: Colors.red,
cursorRadius: Radius.circular(16.0),
cursorWidth: 16.0,
)
控制 TextField 中的大小和最大長(zhǎng)度
1.控制最大字符數(shù)
TextField(
maxLength: 4,
)
1.控制最大行數(shù)
TextField(
maxLines: 3,
)
模糊文本
6.png
TextField(
obscureText: true,
)
裝飾 TextField
1.使用提示
TextField(
decoration: InputDecoration(
hintText: "Demo Text",
hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
),
)
2.增加圖標(biāo)
7.png
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.print)
),
)
1_rLwdJJEouFU1CUARs17mmw.png
TextField(
decoration: InputDecoration(
icon: Icon(Icons.print)
),
)
8.png
TextField(
decoration: InputDecoration(
prefix: CircularProgressIndicator(),
),
)
3.去除光標(biāo)
TextField(
decoration: InputDecoration.collapsed(hintText: "")
)
4.增加邊框
10.png
TextField(
decoration: InputDecoration(
border: OutlineInputBorder()
)
)
5.持久消息
9.png
TextField(
decoration: InputDecoration(
helperText: "Hello"
),
),
