Flutter学习-TextField

目录

focusNode：获取焦点

decoration：InputDecoration边框装饰

keyboardType：TextInputType(输入的类型)

textCapitalization：TextCapitalization.none 配置大小写键盘

textInputAction：TextInputAction 键盘操作按钮类型

obscuringCharacter："*" 设置隐藏的样式

obscureText：是否隐藏内容

inputFormatters：输入格式化

问题

格式化输入的手机号为3 4 4格式

---

controller： 控制器

TextEditingController controller = TextEditingController();
// 监听
controller.addListener(() {});
// 设置光标位置cursor光标所在位置
controller.selection = TextSelection.fromPosition(
      TextPosition(affinity: TextAffinity.downstream, offset: cursor));
}

focusNode：获取焦点

FocusNode focus = FocusNode();
// 获取焦点
focus.requestFocus();
// 失去焦点
focus.unfocus();
// 获取焦点可以用于关闭键盘
FocusScope.of(context).requestFocus(FocusNode());

decoration：InputDecoration边框装饰

InputDecoration({
    contentPadding：内边距
    icon:显示输入框左外侧图标
    prefixIcon：  显示输入框左内侧图标
    suffixIcon： 显示输入框右边内侧图标
    filled： 是否填充背景
    fillColor：填充的背景颜色
    border：InputBorder.none去除边框
  })

keyboardType：TextInputType(输入的类型)

这个只是键盘的显示类型，例：使用TextInputType.phone 只是键盘显示了数字输入并不代表输入框只能输入数字，需要配合 inputFormatters一起使用限制输入的类型

textCapitalization：TextCapitalization.none 配置大小写键盘

textInputAction：TextInputAction 键盘操作按钮类型

obscuringCharacter："*" 设置隐藏的样式

obscureText：是否隐藏内容

inputFormatters：输入格式化

 inputFormatters: [
    // 限制输入的长度
    LengthLimitingTextInputFormatter(12)
    // 只允许输入数字和空格
    FilteringTextInputFormatter.allow(RegExp(r'[0-9\s]'))
    // 只允许输入数字
    FilteringTextInputFormatter.digitsOnly
 ]

问题

1. 解决提示文字和输入文本不在同一垂直显示位置使用 hintStyle(height: 1.0) https://github.com/flutter/flutter/issues/40219
2. 设置TextFiled 高度可以使用Container包裹，设置边框
3. 使用maxLength限制输入长度，设置counterText: ""这个可以隐藏输入框下面的提示语
4. 输入文本不居中解决办法:

   InputDecoration(
       contentPadding: EdgeInsets.all(0),
       border: OutlineInputBorder(borderSide: BorderSide.none),
   )

格式化输入的手机号为3 4 4格式

/// 手机号格式化（123 4567 8901） 344
class SplitPhoneNumber {
  String phoneStr = "";

  /// 去除手机号中间空格
  static String getInputPhone(String phone) {
    String str = phone;
    return str.trim().replaceAll(" ", "");
  }

  /// 是否是数字
  static bool isNumber(String str){
    String s = str.replaceAll(" ", "");
   return RegExp(r'[0-9]*').hasMatch(s);
  }

  /// 格式化手机号为（133 3333 3333） 3 4 4
  void splitPhoneNumber(TextEditingController controller, String text) {
    bool isMatch1 = RegExp(r"\d{3} \d{4} \d{0,4}$").hasMatch(text);
    bool isMatch2 = RegExp(r"\d{3} \d{0,4}$").hasMatch(text);
    phoneStr = "";
    // 光标的位置
    int cursor = controller.value.selection.baseOffset;
    if (cursor < 0) {
      cursor = text.length;
      controller.selection = TextSelection.fromPosition(
          TextPosition(affinity: TextAffinity.downstream, offset: cursor));
    }
    int length = text.length;
    if ((length == 4 || length == 9) && text.endsWith(" ")) {
      String str = text.substring(0, length - 1);
      phoneStr = str;
    } else if (length > 8 && !isMatch1 ||
        length >= 4 && length <= 8 && !isMatch2) {
      text = text.trim();
      int num = getSpaceNum(cursor, text);
      String str = text.replaceAll(" ", "");
      int l = str.length;
      if (l > 7) {
        String str1 = str.substring(0, 3);
        phoneStr = str1 + " ";
        String str2 = str.substring(3, 7);
        phoneStr = phoneStr + str2 + " ";
        String str3 = str.substring(7);
        phoneStr = phoneStr + str3;
      } else if (l > 3) {
        String str1 = str.substring(0, 3);
        phoneStr = str1 + " ";
        String str2 = str.substring(3);
        phoneStr = phoneStr + str2;
      } else {
        phoneStr = str;
      }
      cursor = cursor + getSpaceNum(cursor, phoneStr) - num;
    }
    if (phoneStr.isNotEmpty) {
      controller.text = phoneStr;
      int l = controller.text.trim().length;
      if (cursor > l) {
        cursor = l;
      }
      controller.selection = TextSelection.fromPosition(
          TextPosition(affinity: TextAffinity.downstream, offset: cursor));
    }
  }

  ///获取光标之前的空格数
  int getSpaceNum(int c, String text) {
    if (c > text.length) {
      c = text.length;
    }
    String str1 = text.substring(0, c);
    String str2 = str1.replaceAll(" ", "");
    return str1.length - str2.length;
  }
}