參數詳解
TextField同時也使用Text 的部分屬性：
屬性 作用
controller 控制器，如同 Android View id
decoration 輸入器裝飾
keyboardType
輸入的類型
- TextInputType.text（普通完整鍵盤）
- TextInputType.number（數字鍵盤）
- TextInputType.emailAddress（帶有“@”的普通鍵盤）
- TextInputType.datetime（帶有“/”和“：”的數字鍵盤）
- TextInputType.multiline（帶有選項以啟用有符號和十進制模式的數字鍵盤）
- TextInputType.url
obscureText 是否隱藏輸入（密碼設置為true）
onChanged 監聽 文字改變觸發
onSubmitted 監聽 鍵盤提交
cursorWidth 光標顯示寬度
cursorRadius 光標顯示圓角
cursorColor 光標顯示顏色
autofocus 是否自動聚焦，默認是 false。
textCapitalization
用戶輸入的類型
- TextCapitalization.none 無
- TextCapitalization.sentences 首句大寫
- TextCapitalization.characters 所有字符大寫
- TextCapitalization.word 每個單詞首字母大寫
enabled 是否禁用。如果是 false 不聚焦
inputFormatters 官方提供了三種校驗方法，分別是
WhitelistingTextInputFormatter(RegExp("[a-z]")) 白名單校驗，也就是只允許輸入符合規則的字符
BlacklistingTextInputFormatter(RegExp("[a-z]")) 黑名單校驗，除了規定的字符其他的都可以輸入
LengthLimitingTextInputFormatter(number) 長度限制，跟 maxLength 作用類似
代碼示例
body: new ListView(
children: <Widget>[
TextField(
decoration: new InputDecoration(hintText: "This is a hint",helperText: '官方表單Demo'),
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
labelText: '數字優先的文本框',
),
),
TextField(
decoration: new InputDecoration(
icon: Icon(Icons.phone),//添加一個圖標
labelText: '請輸入你的用戶名',
helperText: '帶圖標和Label的文本輸入框',
),
),
TextField(
decoration: new InputDecoration(
icon: Icon(Icons.lock),//添加一個圖標
labelText: '請輸入密碼',
helperText: '帶圖標和Label的密碼輸入框',
),
obscureText: true, //是否隱藏輸入
),
//--------------------------------模擬登陸---------------------------
Text('模擬登陸',style: TextStyle(fontSize: 20,height: 3,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),
TextField(
controller: userController, //控制器，控制TextField文字 同 Android View id
decoration: new InputDecoration(
icon: Icon(Icons.phone),//添加一個圖標
labelText: '請輸入你的用戶名',
),
autofocus: false,
),
TextField(
controller: passController,
decoration: new InputDecoration(
icon: Icon(Icons.lock),//添加一個圖標
labelText: '請輸入密碼',
),
obscureText: true, //
),
new Container(
width: 340.0,
padding: new EdgeInsets.all(20),
child: new Card(
color: Colors.blue,
elevation: 16.0,
child: new FlatButton(
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
'登 錄',
style: new TextStyle(
color: Colors.white, fontSize: 16.0),
),
),
onPressed: _login
)
)
),
],
)
//登陸校驗
void _login() {
print({'用戶名': userController.text, '密碼': passController.text});
if(userController.text.isEmpty){
myDialog('請輸入用戶名！');
}else if(passController.text.isEmpty){
myDialog('請輸入密碼！');
}else if(userController.text == 'mzw' && passController.text == '123'){
myDialog('登陸成功！');
userController.clear();
passController.clear();
}else {
myDialog('用戶密碼錯誤！');
}
}
//對話框
void myDialog(String msg){
print(myContext);
showDialog(
context: myContext,
barrierDismissible: false,
child: new AlertDialog(
title: new Text(
'溫馨提示',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text(msg),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.pop(myContext);
},
child: new Text('確定')),
],
),
);
}
TextField(
decoration: new InputDecoration(
labelText: '帶邊框的文本輸入眶',
border: OutlineInputBorder(http://www.amjmh.com),
),
),
TextField(
maxLines: 10,
minLines: 5,
decoration: new InputDecoration(
labelText: '多行文本輸入框',
border: OutlineInputBorder(),
),
),
效果圖
————————————————