一、Flutter中TextField控件在使用的时候在设置边框InputBorder
Flutter中TextField控件在使用的时候在设置边框时有如下几种：
- InputBorder? errorBorder：在InputDecorate没有焦点显示错误的时候使用
- InputBorder? focusedBorder：在InputDecorate有焦点且不显示错误的时候使用
- InputBorder? focusedErrorBorder：在InputDecorate有焦点且显示错误的时候使用
- InputBorder? disabledBorder：在InputDecorate不能使用且不显示错误的时候使用
- InputBorder? enabledBorder：在InputDecorate能使用且不显示错误的时候使用
- InputBorder? border：在输入框上绘制
不同状态下的边框样式，他们接收值的类型都一样，不过需要注意优先级。
大致分为以下几种情况
控件禁用时当enabled为false时，如果指定了disabledBorder，优先使用disabledBorder，没有的话设置disabledBorder则使用border的部分样式（颜色默认是灰色）
控件启用(enable为true)，但errorText有值输入框没有焦点时，优先使用errorBorder的样式，输入框有焦点时，优先使用focusedErrorBorder，如果这两个都没有设置则使用border的部分样式（颜色默认是红色）
控件启用状态，且errorText没有值输入框没有焦点时，优先使用enabledBorder ，有焦点时，优先使用focusedBorder，两者均没有指定时，使用默认的border
总体来说，默认的border优先级别较低。
建议：
- 在开发过程中我们如果需要errorText的话，我们只需要设置 errorBorder、focusedErrorBorder这三个即可。不需要errorText的话
- 不需要errorText的话，只需要设置enabledBorder 、focusedBorder
// 1. 控件禁用时 当enabled为false时，如果指定了disabledBorder，优先使用disabledBorder，
// 没有的话设置disabledBorder则使用border的部分样式（颜色默认是灰色）
enabled: false,
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 2. 控件启用(enable为true)，但errorText有值输入框没有焦点时，优先使用errorBorder的样式，
// 输入框有焦点时，优先使用focusedErrorBorder，如果这两个都没有设置则使用border的部分样式（颜色默认是红色）
errorText: '出错了',
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 3、控件启用状态，且errorText没有值输入框没有焦点时，优先使用enabledBorder ，
// 有焦点时，优先使用focusedBorder，两者均没有指定时，使用默认的border
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// 隐藏下划线
// border: InputBorder.none,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
二、Flutter中使用TextField控件中的事件
- final ValueChanged<String>? onChanged;
- final VoidCallback? onEditingComplete;
- final ValueChanged<String>? onSubmitted;
- final GestureTapCallback? onTap;
TextField(
decoration: InputDecoration(
hintText: hintText,
// 隐藏下划线
border: InputBorder.none,
// 颜色填充
// filled: true,
// fillColor: Colors.cyan,
),
// 输入文本发生变化时的回调，参数即为输入框中的值
onChanged: (value) {
print(value)
},
// 点击键盘的动作按钮时的回调，没有参数，注意这个方法使用后点击键盘上的动作按钮就不会自动收起键盘了
onEditingComplete: () {
print('点击了键盘上的动作按钮！');
},
// 点击键盘的动作按钮时的回调，参数为当前输入框中的值
onSubmitted: (value) {
print('当前输入框中的值为：$value');
},
// 点击输入框的时候就触发，当设置了enabled: false的话则点击无效
// enabled: false,
onTap: () {
print('点击按钮');
},
),
三、点击空白 input 失去焦点
需要在页面的Scaffold外层加如下代码：
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
// 方式一：
FocusScope.of(context).requestFocus(FocusNode());
// 方式二：（与方式一的区别在于，键盘收起后文本是否失去焦点）
SystemChannels.textInput.invokeMethod('TextInput.hide');
// 方式三：还可以将所有的FocusNode进行包装整体进行取消
// unFocus();
},
child: Scaffold(
...
)
);
void unFocus() {
phoneFocusNode.unfocus();
passwordFocusNode.unfocus();
dateFocusNode.unfocus();
}
注意：
FocusScope.of(context).requestFocus(FocusNode());这种应该是获取焦点的方式，当传入具体的focusNode的话，该输入框就会获取焦点，弹出键盘，如果没有具体指定，只是传入一个FocusNode()的实例，会收起键盘，具体原因，需要查一下源码，mark一下。
四、常用正则校验
// 字母
RegExp letterReg = RegExp("[a-zA-Z]");
// 中文正则
RegExp chineseReg = RegExp("[\u4e00-\u9fa5]");
// 字母、数字和汉字正则
RegExp letterDigitChineseReg = RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]");
// emoji表情正则
RegExp emojiReg = RegExp(
"[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]");
使用TextInputFormatter对输入内容增加校验：
// 用于限制输入的内容，接收一个TextInputFormatter类型的集合
inputFormatters: [
// 白名单设置，只允许输入小写的a-z
// FilteringTextInputFormatter.allow(RegExp("[a-z]")),
// 黑名单设置，不允许输入emoji表情和中文
FilteringTextInputFormatter.deny(emojiReg),
FilteringTextInputFormatter.deny(chineseReg),
// 只允许输入数字
// FilteringTextInputFormatter.digitsOnly,
// FilteringTextInputFormatter.singleLineFormatter,
// LengthLimitingTextInputFormatter(5)
],
