Flutter InputDecoration 常用属性

23 min read

属性

icon | 位于输入框外侧坐标的图标
labelText | 提示语,位于输入框上方
labelStyle | 提示语样式 TextStyle
helperText | 辅助文本,位于输入框下方,errorText 为空时显示
helperStyle | 辅助文本样式 TextStyle
helperMaxLines | 辅助文本最大展示行数
hintText | 占位文本,位于输入框光标后,输入内容为空时展示
hintStyle | 占位文本样式 TextStyle
hintMaxLines | 占位文本最大展示行数
errorText | 错误文本,位于输入框下方
errorStyle | 错误文本样式 TextStyle
errorMaxLines | 错误文本最大展示行数
hasFloatingPlaceholder | 默认为true,从 v1.13.2 版本已废弃,使用 floatingLabelBehavior 替代
floatingLabelBehavior | FloatingLabelBehavior,auto : labelText 显示在输入框中,当开始输入时,会有一个动画,字体变小并显示在输入框上方。 never : labelText 显示在输入框中,当开始输入时,labelText 隐藏。 always: LabelText 永远显示在最上方。
isCollapsed | 是否为InputDecoration.collapsed,默认为 false,为true时,需要使用 InputDecoration.collapsed() 来创建 decoration
isDense | 输入框是否为密集形式,默认为false
contentPadding | 内间距,默认值与 border 以及 isDense 有关,下方会贴源码备注
prefixIcon | 头部图标,位于输入框内部最左侧
prefixIconConstraints | 头部图标盒约束,效果不是很明显
prefix | 头部组件 Widget,位于光标左侧,与 prefixText 不能同时使用
prefixText | 头部文本,位于光标左侧,与 prefix 不能同时使用
prefixStyle | 头部文本样式 TextStyle
suffixIcon | 尾部图标,位于输入框内部最右侧
suffix | 尾部组件 Widget,位于输入框右侧,与 suffixText 不能同时使用
suffixText | 尾部文本,位于输入框右侧,与 suffix 不能同时使用
suffixStyle | 尾部文本样式 TextStyle
suffixIconConstraints | 尾部图标盒约束,效果不是很明显
counter | 备注组件 Widget,位于输入框右下角外侧,与 counterText 不能同时使用
counterText | 备注文本,位于输入框右下角外侧,与 counter 不能同时使用
counterStyle | 备注文本样式 TextStyle
filled | 是否填充
fillColor | 填充色
focusColor | 聚焦色
hoverColor | 鼠标悬停色
errorBorder | 错误边框,errorText不为空,输入框没有焦点时显示
focusedBorder | 输入框开始输入时的边框,errorText为空时生效
focusedErrorBorder | errorText不为空时,输入框有焦点时的边框
disabledBorder | 输入框禁用时的边框,errorText为空时生效
enabledBorder | 输入框可用时的边框,errorText为空时生效
border | 边框
enabled | 输入框是否可用,默认为 true
semanticCounterText | counterText 的语义标签
alignLabelWithHint | 当 textField 为多行时,居中对齐行为,默认为 false

代码

  InputDecoration _decoration(){
    return InputDecoration(
      icon: Icon(Icons.print),

      fillColor: Colors.yellow.shade200,
      filled: true,

      errorMaxLines: 2,
      errorText: "ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ",
      errorStyle: TextStyle( color: Colors.green, fontSize: 14),

      helperText: "helperText",
      helperMaxLines: 2,
      helperStyle: TextStyle( color: Colors.black, fontSize: 14),

      labelText: "labelText",
      labelStyle: TextStyle( color: Colors.red, fontSize: 14),


      suffixText: "suffixText",
      suffixStyle: TextStyle( color: Colors.grey, fontSize: 14),
      suffixIcon: Icon(Icons.ac_unit),

      counterText: "counterText",
      counterStyle: TextStyle( color: Colors.pink, fontSize: 14),

      hintText: "hintText",
      hintMaxLines: 2,
      hintStyle: TextStyle( color: Colors.orange, fontSize: 14),

      prefixText: "prefixText",
      prefixStyle: TextStyle( color: Colors.blue, fontSize: 14),
      prefixIcon: Icon(Icons.phone),

      // 没啥明显效果
      prefixIconConstraints: BoxConstraints(minWidth: 50),
      suffixIconConstraints: BoxConstraints(minWidth: 30, minHeight: 50),

      semanticCounterText: "semanticCounterText",

      contentPadding: EdgeInsets.fromLTRB(0, 30, 0, 30),

      floatingLabelBehavior: FloatingLabelBehavior.always
    );
  }

设置 InputField 宽高

TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
    )
)