Flutter中表单控件的使用

一、Flutter中TextField控件在使用的时候在设置边框InputBorder

Flutter中TextField控件在使用的时候在设置边框时有如下几种：

• InputBorder? errorBorder：在InputDecorate没有焦点显示错误的时候使用
• InputBorder? focusedBorder：在InputDecorate有焦点且不显示错误的时候使用
• InputBorder? focusedErrorBorder：在InputDecorate有焦点且显示错误的时候使用
• InputBorder? disabledBorder：在InputDecorate不能使用且不显示错误的时候使用
• InputBorder? enabledBorder：在InputDecorate能使用且不显示错误的时候使用
• InputBorder? border：在输入框上绘制

不同状态下的边框样式，他们接收值的类型都一样，不过需要注意优先级。
大致分为以下几种情况

1. 控件禁用时当enabled为false时，如果指定了disabledBorder，优先使用disabledBorder，没有的话设置disabledBorder则使用border的部分样式（颜色默认是灰色）

2. 控件启用(enable为true)，但errorText有值输入框没有焦点时，优先使用errorBorder的样式，输入框有焦点时，优先使用focusedErrorBorder，如果这两个都没有设置则使用border的部分样式（颜色默认是红色）

3. 控件启用状态，且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)
],