上一節(jié)說到TextField技掏，今天詳細(xì)研究下這個(gè)控件剪个。
import 'package:flutter/material.dart';
class LoginView extends StatefulWidget {
const LoginView({super.key});
@override
State<LoginView> createState() {
return LoginViewState();
}
}
class LoginViewState extends State<LoginView> {
TextEditingController phoneController = TextEditingController();
TextEditingController pwdController = TextEditingController();
void login() {
print({'phone': phoneController.text, 'pwd': pwdController.text});
if (phoneController.text.length != 11) {
showDialog(
context: context,
builder: (context) => const AlertDialog(
title: Text('手機(jī)號(hào)長度不對(duì)'),
));
} else if (pwdController.text.isEmpty) {
showDialog(
context: context,
builder: (context) => const AlertDialog(
title: Text('密碼不能為空'),
));
} else {
showDialog(
context: context,
builder: (context) => const AlertDialog(
title: Text('login success'),
));
phoneController.clear();
pwdController.clear();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("please login"),
),
body: Column(
children: <Widget>[
const Text(
'登錄演示',
style: TextStyle(
color: Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: Color(0xffff9900),
fontSize: 21),
),
TextField(
controller: phoneController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(10),
icon: Icon(Icons.phone),
labelText: "please enter username",
helperText: "Please enter 11 numbers"),
autofocus: false,
),
TextField(
controller: pwdController,
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(10),
icon: Icon(Icons.lock),
labelText: "please enter password",
helperText: "Please enter password"),
obscureText: true,
),
TextButton(onPressed: login, child: const Text("Login")),
],
),
);
}
}
簡(jiǎn)單介紹下，使用TextField的時(shí)候颖对，需要在State里去聲明TextEditingController phoneController = TextEditingController(); 并在控件TextField實(shí)例化的時(shí)候在controller處綁定赏寇，這樣就可以用phoneController.text以及phoneController.clear()來操作控件內(nèi)容了吉嫩。
TextField 有基本屬性，常用的有
this.controller,//控制器
this.focusNode,//焦點(diǎn)
this.obscureText = false,//是否隱藏文本嗅定，即顯示密碼類型
this.maxLines = 1,//最多行數(shù)自娩，高度與行數(shù)同步
this.autofocus = false,//自動(dòng)聚焦
this.decoration = const InputDecoration(),//裝飾
TextInputType keyboardType,//鍵盤類型，即輸入類型
this.onChanged,//輸入改變回調(diào)
this.textInputAction,//鍵盤按鈕
this.textCapitalization = TextCapitalization.none,//大小寫
其中有一個(gè)InputDecoration類型的decoration(裝飾器)渠退，主要控制外觀以及提示信息等忙迁。
InputDecoration({
this.icon, //位于裝飾器外部和輸入框前面的圖片
this.labelText, //用于描述輸入框，例如這個(gè)輸入框是用來輸入用戶名還是密碼的碎乃，當(dāng)輸入框獲取焦點(diǎn)時(shí)默認(rèn)會(huì)浮動(dòng)到上方姊扔，
this.labelStyle, // 控制labelText的樣式,接收一個(gè)TextStyle類型的值
this.helperText, //輔助文本，位于輸入框下方梅誓，如果errorText不為空的話恰梢，則helperText不會(huì)顯示
this.helperStyle, //helperText的樣式
this.hintText, //提示文本佛南，位于輸入框內(nèi)部
this.hintStyle, //hintText的樣式
this.hintMaxLines, //提示信息最大行數(shù)
this.errorText, //錯(cuò)誤信息提示
this.errorStyle, //errorText的樣式
this.errorMaxLines, //errorText最大行數(shù)
this.hasFloatingPlaceholder = true, //labelText是否浮動(dòng)，默認(rèn)為true嵌言，修改為false則labelText在輸入框獲取焦點(diǎn)時(shí)不會(huì)浮動(dòng)且不顯示
this.isDense, //改變輸入框是否為密集型嗅回，默認(rèn)為false，修改為true時(shí)摧茴，圖標(biāo)及間距會(huì)變小
this.contentPadding, //內(nèi)間距
this.prefixIcon, //位于輸入框內(nèi)部起始位置的圖標(biāo)绵载。
this.prefix, //預(yù)先填充的Widget,跟prefixText同時(shí)只能出現(xiàn)一個(gè)
this.prefixText, //預(yù)填充的文本，例如手機(jī)號(hào)前面預(yù)先加上區(qū)號(hào)等
this.prefixStyle, //prefixText的樣式
this.suffixIcon, //位于輸入框后面的圖片,例如一般輸入框后面會(huì)有個(gè)眼睛苛白，控制輸入內(nèi)容是否明文
this.suffix, //位于輸入框尾部的控件娃豹，同樣的不能和suffixText同時(shí)使用
this.suffixText,//位于尾部的填充文字
this.suffixStyle, //suffixText的樣式
this.counter,//位于輸入框右下方的小控件，不能和counterText同時(shí)使用
this.counterText,//位于右下方顯示的文本丸氛，常用于顯示輸入的字符數(shù)量
this.counterStyle, //counterText的樣式
this.filled, //如果為true培愁，則輸入使用fillColor指定的顏色填充
this.fillColor, //相當(dāng)于輸入框的背景顏色
this.errorBorder, //errorText不為空，輸入框沒有焦點(diǎn)時(shí)要顯示的邊框
this.focusedBorder, //輸入框有焦點(diǎn)時(shí)的邊框,如果errorText不為空的話缓窜，該屬性無效
this.focusedErrorBorder, //errorText不為空時(shí)定续，輸入框有焦點(diǎn)時(shí)的邊框
this.disabledBorder, //輸入框禁用時(shí)顯示的邊框，如果errorText不為空的話禾锤，該屬性無效
this.enabledBorder, //輸入框可用時(shí)顯示的邊框私股，如果errorText不為空的話，該屬性無效
this.border, //正常情況下的border
this.enabled = true, //輸入框是否可用
this.semanticCounterText,
this.alignLabelWithHint,
})
這些屬性用到的時(shí)候再看就可以恩掷。
做項(xiàng)目的時(shí)候 經(jīng)常會(huì)有焦點(diǎn)問題倡鲸，比如讓textField失去焦點(diǎn)，讓textField成為第一響應(yīng)者等等黄娘，那么我們需要在State里去聲明一個(gè) FocusNode useFocusNode = FocusNode(); 然后在textField實(shí)例化的時(shí)候定義focuseNode參數(shù)為 useFocusNode峭状。這樣在邏輯地方可以調(diào)用useFocusNode.requestFocus(); 來獲取焦點(diǎn)，useFocusNode.unfocus();來失去焦點(diǎn)逼争。
有時(shí)候鍵盤彈出的時(shí)候會(huì)把我們某些控件擋住优床，iOS是設(shè)置contentInset，flutter解決辦法有兩種, 第一種是用ScrollView或者ListView等可以滾動(dòng)的空間包裹誓焦，可以用過padding來實(shí)現(xiàn)鍵盤不被遮擋的問題胆敞。
//沒有親自試過
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom
),
child: TextField(
)
)
第二種是通過Scaffold，它是自帶自適應(yīng)的輸入法彈出的杂伟，有個(gè)屬性是resizeToAvoidBottomInset移层，默認(rèn)true適應(yīng)鍵盤模式。
參考鏈接：https://blog.csdn.net/jia635/article/details/118307091
http://www.reibang.com/p/8bac3d2a4e63/
