一年前初学flutter,再次看以前知识有些生疏,当做笔记记之。
文章转载自简书
基本属性
- 能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效
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
child: new TextField(
autocorrect: false, // 是否自动校正
autofocus: false, //自动获取焦点
enabled: true, // 是否启用
inputFormatters: [], //对输入的文字进行限制和校验
keyboardType: TextInputType.text, //获取焦点时,启用的键盘类型
maxLines: 2, // 输入框最大的显示行数
maxLength: 3, //允许输入的字符长度/
maxLengthEnforced: false, //是否允许输入的字符长度超过限定的字符长度
obscureText: true, // 是否隐藏输入的内容
onChanged: (newValue) {
// print(newValue); // 当输入内容变更时,如何处理
},
onSubmitted: (value) {
// print("whar"); // 当用户确定已经完成编辑时触发
},
style: new TextStyle(
color: new Color(Colors.amberAccent.green)), // 设置字体样式
textAlign: TextAlign.center, //输入的内容在水平方向如何显示
decoration: new InputDecoration(
labelText: "城市",
icon: new Icon(Icons.location_city),
border: new OutlineInputBorder(), // 边框样式
helperText: 'required',
hintText: '请选择你要投保的城市',
prefixIcon: new Icon(Icons.android),
prefixText: 'Hello'),
),
输入处理
- textfiled控件有三个回调函数
- onChanged事件,在输入内容发生变化的时候触发,onSubmitted事件,则是在输入结束,点击完成的时候触发。 然而在TextFormField中没有这两个事件,取而代之的是validator,onSaved,onFieldSubmitted 他们都接受三个函数,并且将其值作为参数传递到函数里面
案例
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
Widget inputSection() {
return Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
// 提示文本
hintText: "Email",
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(80.0),
),
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(
height: 8.0,
),
TextFormField(
decoration: InputDecoration(
hintText: "Password",
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
// 隐藏文本
obscureText: true,
),
],
);
}