flutter的TextField参数、案例整理（下）

TextField

简述

下面整理了一些TextField常用参数的具体使用方式，留作记录。

decoration让输入框样式自定义

构造函数

const InputDecoration({this.icon, // 左边添加一个 Widgetthis.labelText, // 顶部描述字符串，如果输入框成为焦点，会发生改变this.labelStyle, // 设置顶部描述的文字样式this.helperText, // 底部描述文字，在输入区域的下方展示this.helperStyle, // 底部描述文字样式this.helperMaxLines, // 底部描述文字最大行数this.hintText, // 占位文字，类似于iOS中的 placeholder，只有当输入框没有输入内容并且成为焦点才会显示出来this.hintStyle, // 占位文字样式this.hintMaxLines, // 占位文字最大行数this.errorText, // 错误提示文字，如果同时设置helperText，会优先显示 errorTextthis.errorStyle, // 错误提示文字样式this.errorMaxLines, // 错误文字提示最大行数this.hasFloatingPlaceholder = true, // 默认为true，表示labelText是否上浮，true上浮，false表示获取焦点后labelText消失，其实就是一种上浮展示的效果this.isDense, // 改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小 行间距减小this.contentPadding, // 设置内容padding（内切），设置后输入框内容、helperText、counterText、errorText都会影响this.prefixIcon, // 在 icon 和 prefix（prefixText） 之间的一个 Widgetthis.prefix, // 输入框之前的一个Widget，基线与输入框基线对齐，如果同时设置了 prefixIcon,则会排布到prefixIcon后面去this.prefixText, // 文本，如果设置了 prefix 就不能设置 prefixText，这两者是冲突的this.prefixStyle, // 设置文本样式this.suffixIcon, // 类似 prefixIcon，只不过这是在尾部this.suffix, // 类似 suffixthis.suffixText, // 类似 prefixText，在这里也不能同时设置 suffixthis.suffixStyle, // suffixText 的样式this.counter, // 一般用来文字计数的Widget，如果同时设置了 counterText，优先展示 counter Widget，故二者互斥this.counterText, // 计数文本展示this.counterStyle, // 计数文本样式this.filled, // 是否需要填充容器this.fillColor, // 设置容器内部的填充颜色，需配合filled=truethis.focusColor, // this.hoverColor, // this.errorBorder, // 输入框输入错误时，并且没有成为焦点边框展示样式this.focusedBorder, // 输入框成为了焦点并且没有设置 errorText 展示样式this.focusedErrorBorder, // 当设置了 errorText时，输入成为焦点边框展示样式this.disabledBorder, // 当输入框不可用时，边框样式this.enabledBorder, // 输入框可用没有成为焦点时边框展示样式this.border, // 设置边框样式，优先级低于其他 xxxborder，如果需要设置没有边框样式使用 InputBorder.nonethis.enabled = true, // 设置输入框是否可用this.semanticCounterText,this.alignLabelWithHint,}) : assert(enabled != null),assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not supported.'),assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not supported.'),isCollapsed = false;

border

设置无边框样式

final InputDecoration _decoration = InputDecoration(border: InputBorder.none, // 无边框设置
);

UnderlineInputBorder

边框下划线样式

enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red,width: 5,style: BorderStyle.none, // 隐藏边框),
),

OutlineInputBorder

边框环绕
选中时的边框效果

focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.orange,width: 3,),borderRadius: BorderRadius.circular(10),gapPadding: 20, // 设置 labelText 与边框的间距
),

keyboardType

键盘是什么样子的，比如纯数字键盘

textInputAction

键盘的确认键是什么，比如有的显示Go，有的显示Next

textCapitalization

键盘大小写，一般不使用

strutStyle

段落样式
构造函数

const StrutStyle({String fontFamily, // 字体名称List<String> fontFamilyFallback, // fontFamily 找不到字体时搜索字体名称的有序列表this.fontSize, // 字体大小this.height, // 设置每行的高度，按照比例来计算的this.leading, // 设置每行的间距，也是按照比例来计算的this.fontWeight,this.fontStyle,this.forceStrutHeight,this.debugLabel,String package,
})