flutter textField

589 阅读1分钟

垂直居中

contentPadding: EdgeInsets.symmetric(vertical: 0),
border: OutlineInputBorder(borderSide: BorderSide.none), // InputBorder.none - 不会垂直居中

设置maxLength,就会默认显示计数器,要不显示计数器:

decoration: InputDecoration(
     counterText: ''
)

格式化手机号码,中间加入空格: 1xx 0000 1111

TextFormField(
        keyboardType: TextInputType.number,
        inputFormatters: [
          // 只让输入0-9
          FilteringTextInputFormatter.allow(RegExp('[0-9]+')),
          //格式化输入内容
          TextInputFormatter.withFunction((oldValue, newValue) {
            String text = newValue.text;
            String positionStr = (text.substring(
                    0, newValue.selection.baseOffset))
                .replaceAll(RegExp(r"\s+\b|\b\s"), ""); //获取光标左边的文本
            //计算格式化后的光标位置
            int length = positionStr.length;
            int position = length;
            if (length <= 3) {
              position = length;
            } else if (length <= 7) {
              position = length + 1;
            } else if (length <= 11) {
              position = length + 2;
            } else {
              position = 13;
            }
            //这里格式化整个输入文本
            text = text.replaceAll(RegExp(r"\s+\b|\b\s"), "");
            String string = "";
            for (int i = 0; i < text.length; i++) {
              if (i > 10) {
                break;
              }
              if (i == 3 || i == 7) {
                if (text[i] != " ") {
                  string = string + " ";
                }
              }
              string = string + text[i];
            }
            text = string;
            return TextEditingValue(
              text: text,
              selection: TextSelection.fromPosition(TextPosition(
                  offset: position,
                  affinity: TextAffinity.upstream)),
            );
          }),
          //限制输入文本长度
          LengthLimitingTextInputFormatter(13),
        ])

属性详情

TextField\
const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型,即输入类型
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//对齐方式\
    this.textDirection,
    this.autofocus = false,//自动聚焦
    this.obscureText = false,//是否隐藏文本,即显示密码类型
    this.autocorrect = true,//自动更正
    this.maxLines = 1,//最多行数,高度与行数同步
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,// 最多输入数,有值后右下角就会有一个计数器
    this.maxLengthEnforced = true,
    this.onChanged,//输入改变回调
    this.onEditingComplete,//输入完成时,配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    this.inputFormatters,//输入校验
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光标宽度
    this.cursorRadius,//光标圆角
    this.cursorColor,//光标颜色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,//点击事件
    this.buildCounter,
    this.scrollPhysics,
})

InputDecoration
const InputDecoration({
    this.icon,//左侧外的图标
    this.labelText,//悬浮提示,可代替hintText
    this.labelStyle,//悬浮提示文字的样式
    this.helperText,//帮助文字
    this.helperStyle,
    this.hintText,//输入提示
    this.hintStyle,
    this.hintMaxLines,
    this.errorText,//错误提示
    this.errorStyle,
    this.errorMaxLines,
    this.hasFloatingPlaceholder = true,//是否显示悬浮提示文字
    this.isDense, // 是否是密集型
    this.contentPadding,//内填充
    this.prefixIcon,//左侧内的图标
    this.prefix,
    this.prefixText,//左侧内的文字
    this.prefixStyle,
    this.suffixIcon,//右侧内图标
    this.suffix,
    this.suffixText,
    this.suffixStyle,
    this.counter,//自定义计数器
    this.counterText,//计数文字 - 为空不显示计数器
    this.counterStyle,//计数样式
    this.filled,//是否填充
    this.fillColor,//填充颜色
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,//边框
    this.enabled = true,
    this.semanticCounterText,
    this.alignLabelWithHint,
})