Flutter控件——常用控件：TextField

Posted 2022-12-03 wzj_what_why_how

TextField

text_field.dart

const TextField(
    Key? key,

    //controller 编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
        大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个。
    this.controller,
    this.focusNode,     //焦点 用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄（handle）。
    this.decoration = const InputDecoration(),     //装饰 （该参数重点介绍）
    TextInputType? keyboardType,     //键盘类型，即输入类型
    this.textInputAction,     //键盘按钮 键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值，全部的取值列表读者可以查看API文档，搜索的图标为TextInputAction.search
    this.textCapitalization = TextCapitalization.none,     //大小写
    this.style,     //正在编辑的文本样式
    this.strutStyle,     //
    this.textAlign = TextAlign.start,     //输入框内编辑文本在水平方向的对齐方式
    this.textAlignVertical,     //
    this.textDirection,     //
    this.readOnly = false,     //
    ToolbarOptions? toolbarOptions,     // 长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll。
    this.showCursor,     //
    this.autofocus = false,     // 是否自动获取焦点
    this.obscuringCharacter = '•',     //
    this.obscureText = false,     // 是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
    this.autocorrect = true,     // 自动更正
    SmartDashesType? smartDashesType,     //
    SmartQuotesType? smartQuotesType,     //
    this.enableSuggestions = true,     //
    this.maxLines = 1,     // 最多行数，高度与行数同步
    this.minLines,     // 最小行数
    this.expands = false,     //
    this.maxLength,     // 最多输入数，有值后右下角就会有一个计数器
    @Deprecated(
      'Use maxLengthEnforcement parameter which provides more specific '
      'behavior related to the maxLength limit. '
      'This feature was deprecated after v1.25.0-5.0.pre.',
    )
    this.maxLengthEnforced = true,     //决定当输入文本长度超过maxLength时如何处理，如截断、超出等。
    this.maxLengthEnforcement,     //
    this.onChanged,     // 输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。
    this.onEditingComplete,     // 输入完成时，配合TextInputAction.done使用
    this.onSubmitted,     // 提交时，配合TextInputAction
    this.onAppPrivateCommand,     //
    this.inputFormatters,     // 用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。
    this.enabled,     // 是否可用。如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）。
    this.cursorWidth = 2.0,     // 光标宽度
    this.cursorHeight,     // 光标高度
    this.cursorRadius,     // 光标圆角
    this.cursorColor,     // 光标颜色
    this.selectionHeightStyle = ui.BoxHeightStyle.tight,     //
    this.selectionWidthStyle = ui.BoxWidthStyle.tight,     //
    this.keyboardAppearance,     //
    this.scrollPadding = const EdgeInsets.all(20.0),     //
    this.dragStartBehavior = DragStartBehavior.start,     //
    this.enableInteractiveSelection = true,     //
    this.selectionControls,     //
    this.onTap,     //点击事件
    this.mouseCursor,     //
    this.buildCounter,     //
    this.scrollController,     //
    this.scrollPhysics,     //
    this.autofillHints,     //
    this.restorationId,     //
    this.enableIMEPersonalizedLearning = true,     //
  )

input_decorator.dart

//decoration装饰参数: 用于控制TextField的外观显示，如提示文本、背景颜色、边框等。
const InputDecoration(
    this.icon,//左侧外的图标
    this.label, //悬浮提示，可代替hintText
    this.labelText,//悬浮提示文字的样式
    this.labelStyle,
    this.floatingLabelStyle,
    this.helperText,//帮助文字
    this.helperStyle,
    this.helperMaxLines,
    this.hintText,//输入提示
    this.hintStyle,
    this.hintTextDirection,
    this.hintMaxLines,
    this.errorText,//错误提示
    this.errorStyle,
    this.errorMaxLines,
    this.floatingLabelBehavior,
    this.isCollapsed = false,
    this.isDense,
    this.contentPadding,//内填充
    this.prefixIcon,//左侧内的图标
    this.prefixIconConstraints,
    this.prefix,
    this.prefixText,//左侧内的文字
    this.prefixStyle,
    this.suffixIcon,//右侧内图标
    this.suffix,
    this.suffixText,
    this.suffixStyle,
    this.suffixIconConstraints,
    this.counter,//自定义计数器
    this.counterText,//计数文字
    this.counterStyle,/计数样式
    this.filled,//是否填充
    this.fillColor,//填充颜色
    this.focusColor,
    this.hoverColor,
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,//边框
    this.enabled = true,
    this.semanticCounterText,
    this.alignLabelWithHint,
    this.constraints,
  )

keyboardType：用于设置该输入框默认的键盘输入类型，取值如下：

TextInputType枚举值 含义
text 文本输入键盘
multiline 多行文本，需和maxLines配合使用(设为null或大于1)
number 数字；会弹出数字键盘
phone 优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
datetime 优化后的日期输入键盘；android上会显示“: -”
emailAddress 优化后的电子邮件地址；会显示“@ .”
url 优化后的url输入键盘； 会显示“/ .”