Flutter教学目录持续更新中
Github源代码持续更新中
1.TextField简介
输入框，这个组件的属性非常的多
2.TextField属性
- controller：文本控制器
- focusNode：获取键盘焦点
- decoration：InputDecoration 边框装饰
- inputType：keyboardType 键盘类型
- textInputAction：键盘的操作按钮类型
- textCapitalization：TextCapitalization.none 配置大小写键盘
- style：输入文本样式
- textAlign：TextAlign.start 对齐方式
- textDirection：文本方向
- readOnly：只读
- showCursor：显示光标
- autofocus = false：是否自动对焦
- obscureText = false：是否隐藏内容，例如密码格式
- obscuringCharacter：隐藏格式
- autocorrect = true：是否自动校正
- maxLines = 1：最大行数
- minLines：最小行数
- maxLength：允许输入的最大长度
- maxLengthEnforced = true：是否允许超过输入最大长度
- onChanged：文本内容变更时回调
- onEditingComplete：提交内容时回调
- onSubmitted：用户提示完成时回调
- inputFormatters：验证及格式
- enabled：是否不可点击
- cursorWidth = 2.0：光标宽度
- cursorRadius：光标圆角弧度
- cursorColor：光标颜色
- keyboardAppearance：键盘亮度,仅限于 iOS 设备
- scrollPadding：EdgeInsets.all(20.0) 滚动到视图中时，填充边距
- enableInteractiveSelection：长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
- onTap：点击时回调
- scrollController：滑动控制器
- scrollPhysics：滑动样式
3.InputDecoration属性
- icon：输入框最前面的widget
- labelText：悬浮提示文本
- labelStyle：悬浮提示文本样式
- helperText：帮助文本
- helperStyle：帮助文本样式
- helperMaxLines：帮助文本最大行数
- hintText：提示文本
- hintStyle：提示文本样式
- hintMaxLines：提示文本最大行数
- errorText：报错文本
- errorStyle：报错文本样式
- errorMaxLines：报错文本最大行数
- isCollapsed：false，是否折叠
- contentPadding：内边距
- prefixIcon：前缀widget
- prefixIconConstraints：prefixIcon约束
- prefix：前缀widget，相当于自定义前缀widget,整体替换prefixIcon，prefixText（不可跟prefixIcon，prefixText同时使用）
- prefixText：前缀文本
- prefixStyle：前缀文本样式
- suffixIcon：后缀widget
- suffix：后缀widget，相当于自定义后缀widget,整体替换suffixText，suffixIcon（不可跟suffixText，suffixIcon同时使用）
- suffixText：后缀文本
- suffixStyle：后缀文本样式
- suffixIconConstraints：suffixIcon约束
- counter：counter widget（在组件右下方，可以自定义功能，不只是计数使用）
- counterText：counter文本
- counterStyle：counter文本样式
- filled：输入框颜色是否填充
- fillColor：输入框填充色
- errorBorder：错误边框
- focusedBorder：获取光标时边框
- focusedErrorBorder：获取光标时错误边框
- disabledBorder：不可用时边框
- enabledBorder：可用时边框
- border：边框
- enabled：true，是否可用
- alignLabelWithHint：label是否对齐hint
我们先来看TextField
4.光标相关属性
cursorColor 为光标颜色，cursorWidth 为光标宽度，cursorRadius 为光标圆角
1601016367508.jpg
cursorColor: Colors.amber,
cursorWidth: 20,
cursorRadius: Radius.circular(5),
5. 文本长度
maxLength 为字符长度，且右下角有编辑长度与整体长度对比；与 maxLengthEnforced 配合，maxLengthEnforced 为 true 时达到最大字符长度后不可编辑；为 false 时可继续编辑展示有差别；
maxLengthEnforced=true.jpg
maxLengthEnforced=false.jpg
maxLength: 10,
maxLengthEnforced: false,
那如果需要设置最大长度又不想有长度计数怎么办
1601017540510.jpg
maxLength: null,
inputFormatters: [LengthLimitingTextInputFormatter(10)],
6. inputFormatters输入过滤
- LengthLimitingTextInputFormatter 限制最长字符；
- WhitelistingTextInputFormatter 白名单 （这个官方也准备废弃，推荐FilteringTextInputFormatter.allow）
- BlacklistingTextInputFormatter 黑名单（已经过时，推荐FilteringTextInputFormatter.deny）
- FilteringTextInputFormatter
例如不允许输入数字（只允许就是allow）
FilteringTextInputFormatter.deny(RegExp(r'\d+'))
7.监听事件以及控制器
onChanged: (text)内容改变的时候触发，返回输入框中的内容
onSubmitted: (text)回车触发，返回输入框中的内容
onEditingComplete：回车触发，无参数返回，一般情况跟onSubmitted一起触发
TextEditingController：控制器也可以添加监听事件，但是这个监听是触发不比较混乱，不推荐用，还有页面结束需要释放。但是TextEditingController可以用来获取输入框内容，清除输入框内容，给输入框赋值初始内容等操作。
8.软键盘弹出遮挡输入框的问题
使用滑动页面如：ListView，如果不是滑动页面在Scaffold中可以使用resizeToAvoidBottomInset: true（resizeToAvoidBottomPadding也一样，但是已经过时）
1601192405078.jpg
9.输入框行数
maxLines，minLines
如果只设置maxLines那么输入框行数= maxLines，如果也设置了minLines那么在没有内容的情况下输入框行数= minLines，随内容增加而增高至maxLines
1601192845369.jpg
1601192873650.jpg
maxLines: 5,
minLines: 2,
10.keyboardType，textInputAction
keyboardType：TextInputType 设置软键盘弹出类型（如text，number，phone等）
textInputAction：TextInputAction 软键盘操作按钮类型（如search，send等）
11.密码框设置
启用加密文字样式输入框行数只能是1，可以自定义加密文字的显示样式
1601193251451.jpg
obscureText: false,
obscuringCharacter: '#',
12.展开样式的输入框
这个情况下父节点必须是一个可以知道高度的组件，也就是说不能是可滑动组件，比如使用Container包裹；最大行数最小行数需要为null，同理也就不可以设置obscureText: true
1601193644309.jpg
Container(
height: 200,
padding: EdgeInsets.all(10),
child: TextField(
maxLines: null,
minLines: null,
expands: true,
)
)
下面来看看InputDecoration的属性
13.icon
可以在输入框前面添加一个widget
1601193925385.jpg
icon: Icon(
Icons.home,
size: 40,
),
14.hint
提示文本
1601194111561.jpg
_textStyle(Color color) {
return TextStyle(
color: color,
fontSize: 14,
fontWeight: FontWeight.bold,
);
}
hintText: 'hintText',
hintMaxLines: 1,
hintStyle: _textStyle(Colors.grey),
15.悬浮提示文本
这个无焦点时显示在输入框内，有焦点就会悬浮在上方
1601194197255.jpg
1601194215120.jpg
labelText: 'labelText',
alignLabelWithHint: false,
labelStyle: _textStyle(Colors.black),
16.帮助文本
1601194380316.jpg
helperText: 'helperText',
helperMaxLines: 1,
helperStyle: _textStyle(Colors.black),
17.报错文本
当errorText有值的时候会覆盖helperText，errorText: null那么helperText会重现显示
1601194561544.jpg
errorText: 'errorText',
errorMaxLines: 1,
errorStyle: _textStyle(Colors.red),
18.输入框填充色
1601194634729.jpg
fillColor: Colors.amber.shade100,
filled: true,
19.前缀
prefix：前缀widget，相当于自定义前缀widget,整体替换prefixIcon，prefixText（不可跟prefixIcon，prefixText同时使用）
1601194771654.jpg
// prefix: ,
prefixIcon: Icon(
Icons.account_circle,
size: 40,
),
prefixText: 'prefixText：',
prefixStyle: _textStyle(Colors.black),
prefixIconConstraints: BoxConstraints.expand(width: 40, height: 40),
20.后缀
suffix：后缀widget，相当于自定义后缀widget,整体替换suffixText，suffixIcon（不可跟suffixText，suffixIcon同时使用）
1601194880870.jpg
// suffix: ,
// suffixIcon: Icon(
// Icons.account_box,
// size: 40,
// ),
suffixIcon: Image.asset('images/scan.png'),
suffixText: 'suffixText',
suffixStyle: _textStyle(Colors.black),
suffixIconConstraints: BoxConstraints.expand(width: 40, height: 40),
21.counter
1601194984687.jpg
// counter: ,
counterText: 'counterText',
counterStyle: _textStyle(Colors.black),
22.border
border属性下BorderSide的属性是无效的，能起效果的只有borderRadius
OutlineInputBorder
1601195580733.jpg
_myOutlineInputBorder(Color color) {
return OutlineInputBorder(
borderSide: BorderSide(
color: color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.circular(20),
);
}
border: _myOutlineInputBorder(Colors.black),
UnderlineInputBorder
1601195649761.jpg
_myUnderlineInputBorder(Color color) {
return UnderlineInputBorder(
borderSide: BorderSide(
color: color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.circular(20),
);
}
border: _myUnderlineInputBorder(Colors.black),
23.disabledBorder/enabledBorder
这两个是配置enabled所对应的边框样式，这个是初始化未接受焦点时候的边框样式
enabled: true.jpg
enabled: false.jpg
enabled: false,
disabledBorder: _myOutlineInputBorder(Colors.deepPurple),
enabledBorder: _myOutlineInputBorder(Colors.blue),
_myOutlineInputBorder(Color color) {
return OutlineInputBorder(
borderSide: BorderSide(
color: color,
style: BorderStyle.solid,
width: 5,
),
borderRadius: BorderRadius.circular(20),
);
}
24.errorBorder/focusedBorder/focusedErrorBorder
errorBorder.jpg
focusedBorder.jpg
focusedErrorBorder.jpg
errorBorder: _myOutlineInputBorder(Colors.red),
focusedBorder: _myOutlineInputBorder(Colors.amber),
focusedErrorBorder: _myOutlineInputBorder(Colors.green),
下一节：Material组件之Checkbox/CheckboxListTile