关于flutter:Flutter-TextField基本使用

33次阅读

共计 2431 个字符,预计需要花费 7 分钟才能阅读完成。

TextField 根本属性

const TextField({
   Key key,
   this.controller,                    // 管制正在编辑文本
   this.focusNode,                     // 获取键盘焦点
   this.decoration = const InputDecoration(),              // 边框装璜
   TextInputType keyboardType,         // 键盘类型
   this.textInputAction,               // 键盘的操作按钮类型
   this.textCapitalization = TextCapitalization.none,      // 配置大小写键盘
   this.style,                         // 输出文本款式
   this.textAlign = TextAlign.start,   // 对齐形式
   this.textDirection,                 // 文本方向
   this.autofocus = false,             // 是否主动对焦
   this.obscureText = false,           // 是否暗藏内容,例如明码格局
   this.autocorrect = true,            // 是否主动校对
   this.maxLines = 1,                  // 最大行数
   this.maxLength,                     // 容许输出的最大长度
   this.maxLengthEnforced = true,      // 是否容许超过输出最大长度
   this.onChanged,                     // 文本内容变更时回调
   this.onEditingComplete,             // 提交内容时回调
   this.onSubmitted,                   // 用户提醒实现时回调
   this.inputFormatters,               // 验证及格局
   this.enabled,                       // 是否不可点击
   this.cursorWidth = 2.0,             // 光标宽度
   this.cursorRadius,                  // 光标圆角弧度
   this.cursorColor,                   // 光标色彩
   this.keyboardAppearance,            // 键盘亮度
   this.scrollPadding = const EdgeInsets.all(20.0),        // 滚动到视图中时,填充边距
   this.enableInteractiveSelection,    // 长按是否展现【剪切 / 复制 / 粘贴菜单 LengthLimitingTextInputFormatter】this.onTap,                         // 点击时回调
}) 

InputDecoration 属性详解

InputDecoration({
    this.icon,    // 位于装璜器内部和输入框后面的图片
    this.labelText,  // 用于形容输入框,例如这个输入框是用来输出用户名还是明码的,当输入框获取焦点时默认会浮动到上方,this.labelStyle,  // 管制 labelText 的款式, 接管一个 TextStyle 类型的值
    this.helperText, // 辅助文本,位于输入框下方,如果 errorText 不为空的话,则 helperText 不会显示
    this.helperStyle, //helperText 的款式
    this.hintText,  // 提醒文本,位于输入框外部
    this.hintStyle, //hintText 的款式
    this.hintMaxLines, // 提示信息最大行数
    this.errorText,  // 错误信息提醒
    this.errorStyle, //errorText 的款式
    this.errorMaxLines,   //errorText 最大行数
    this.hasFloatingPlaceholder = true,  //labelText 是否浮动,默认为 true,批改为 false 则 labelText 在输入框获取焦点时不会浮动且不显示
    this.isDense,   // 扭转输入框是否为密集型,默认为 false,批改为 true 时,图标及间距会变小
    this.contentPadding, // 内间距
    this.prefixIcon,  // 位于输入框外部起始地位的图标。this.prefix,   // 事后填充的 Widget, 跟 prefixText 同时只能呈现一个
    this.prefixText,  // 预填充的文本,例如手机号后面事后加上区号等
    this.prefixStyle,  //prefixText 的款式
    this.suffixIcon, // 位于输入框前面的图片, 例如个别输入框前面会有个眼睛,管制输出内容是否明文
    this.suffix,  // 位于输入框尾部的控件,同样的不能和 suffixText 同时应用
    this.suffixText,// 位于尾部的填充文字
    this.suffixStyle,  //suffixText 的款式
    this.counter,// 位于输入框右下方的小控件,不能和 counterText 同时应用
    this.counterText,// 位于右下方显示的文本,罕用于显示输出的字符数量
    this.counterStyle, //counterText 的款式
    this.filled,  // 如果为 true,则输出应用 fillColor 指定的色彩填充
    this.fillColor,  // 相当于输入框的背景色彩
    this.errorBorder,   //errorText 不为空,输入框没有焦点时要显示的边框
    this.focusedBorder,  // 输入框有焦点时的边框, 如果 errorText 不为空的话,该属性有效
    this.focusedErrorBorder,  //errorText 不为空时,输入框有焦点时的边框
    this.disabledBorder,  // 输入框禁用时显示的边框,如果 errorText 不为空的话,该属性有效
    this.enabledBorder,  // 输入框可用时显示的边框,如果 errorText 不为空的话,该属性有效
    this.border, // 失常状况下的 border
    this.enabled = true,  // 输入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  }) 

Flutter TextField 文本输入框的根本属性及详解

正文完
 0