|
le: new TextStyle(color: Colors.amber),//hint提示文案字体颜色
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),//添加圆角
),
)
),
),
Padding(
padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0),
child: TextField(
controller: _pwdController,//绑定controller
maxLines: 1,//最多一行
maxLength: 10,//最多输入10个字符
autofocus: true,//自动获取焦点
textAlign: TextAlign.left,//从左到右对齐
style: new TextStyle(color: Colors.white,fontSize: 20.0),//输入内容颜色和字体大小
cursorColor: Colors.deepPurple,//光标颜色
keyboardType: TextInputType.phone,
decoration: InputDecoration(
//添加装饰效果
filled: true,//背景是否填充
fillColor: Colors.redAccent,//添加黄色填充色（filled: true必须设置，否则单独设置填充色不会生效）
helperText: '密 码',
prefixIcon: Icon(Icons.person_add),//左侧图标
suffixText: '密 码',//右侧文本提示
suffixStyle: new TextStyle(fontSize: 20),//右侧提示文案字体大小
hintText: 'input user pwd',//hint提示文案
hintStyle: new TextStyle(color: Colors.amber),//hint提示文案字体颜色
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),//添加圆角
),
)
),
),
RaisedButton(
onPressed: _loginSubmit,
child: new Text('登陆'),
)
],
),
),
);
}
void _loginSubmit() {
if(_useController.text.length != 10){
Fluttertoast.showToast(msg: '用户名长度为11位');
}
}
}
效果截图：
上面的各类属性设置都有很详细的注释，这里就挑几个容易踩的坑来讲一下吧！
1.多个TextField一定要对应多个controller，不然多个TextField用同一个controller的话，会导致一个输入框的内容会同步到其他输入框内：
final TextEditingController _useController = new TextEditingController();
final TextEditingController _pwdController = new TextEditingController();
2.如果要给TextField设置背景填充色，filled和fillColor这两个属性一定要成对出现，不然你会发现设置不生效：
filled: true,//背景是否填充
fillColor: Colors.redAccent,//添加黄色填充色（filled: true必须设置，否则单独设置填充色不会生效）
3.通过controller获取输入框内输入的内容：
4.TextField内容变化监听，一般可用作金额输入进行动态计算操作：
onChanged: (value){
Fluttertoast.showToast(msg: value);
},
5.TextField装饰器构造方法
InputDecoration({
this.icon, //位于装饰器外部和输入框前面的图片
this.labelText, //用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，
this.labelStyle, // 控制labelText的样式,接收一个TextStyle类型的值
this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
this.helperStyle, //helperText的样式
this.hintText, //提示文本，位于输入框内部
this.hintStyle, //hintText的样式
this.hintMaxLines, //提示信息最大行数
this.errorText, //错误信息提示
this.errorStyle, //errorText的样式
this.errorMaxLines, //errorText最大行数
this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
this.isDense, //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
this.contentPadding, //内间距
this.prefixIcon, //位于输入框内部起始位置的图标。
this.prefix, //预先填充的Widget,跟prefixText同时只能出现一个
this.prefixText, //预填充的文本，例如手机号前面预先加上区号等
this.prefixStyle, //prefixText的样式
this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
this.suffix, //位于输入框尾部的控件，同样的不能和suffixText同时使用
this.suffixText,//位于尾部的填充文字
this.suffixStyle, //suffixText的样式
this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
this.counterStyle, //counterText的样式
this.filled, //如果为true，则输入使用fillColor指定的颜色填充
this.fillColor, //相当于输入框的背景颜色
this.errorBorder, //errorText不为空，输入框没有焦点时要显示的边框
|