【Flutter 专题】65 图解基本 TextField 文本输入框 (二)
小菜刚学习了 TextField 的基本用法，今天特意学习一下 TextField InputDecoration 文本框装饰器的相关内容；
InputDecoration 源码分析
分析源码可知，Flutter 不仅提供了全面的构建装饰器的方式，还提供了简单便利的构建方式 collapsed 默认是无边框的，且无法设置标签等其他属性；
案例尝试
icon 为装饰器外小图标，可灵活设置图标或其他 Widget，默认距输入框 16dp，主题可通过 IconTheme 设置；
labelText 为文本框描述标签，为 String 类型，直接编辑内容即可；labelStyle 为标签样式属性；TextField 获取焦点之后描述标签上移；
helperText 为文本框辅助标签，一般在文本框底部，提示性内容；helperStyle 为文本框辅助标签样式属性；与 TextField 是否获取焦点无变化；
hintText 为文本框默认提示信息，若设置 labelText，则 TextField 在未获取焦点时优先展示 labelText；hintStyle 为文本框提示信息样式属性；hintMaxLines 为提示信息过长时允许展示的最大行数；
errorText 为文本框错误提示信息，一般在文本框底部，当设置 errorText 时不展示 helperText，整体默认为红色；errorStyle 为错误提示信息样式属性；errorMaxLines 为错误信息过长时允许展示的最大行数；与 hintText 类似；
hasFloatingPlaceholder 设置 TextField 获取焦点时 labelText 是否向上浮动；设置为 false 时，获取焦点后 labelText 隐藏，不会向上浮动；
isDense 是否为紧凑型文本框，true 为紧凑型文本框，图标等与输入框边距较小；
contentPadding 为编辑内容与文本框内边距；
prefix... 是文本框前置组件，prefixIcon 为前置图标，固定在文本输入框前边，与 icon 位置不同，其样式通过 IconTheme 调整；prefixText 为前置预填充文本，例如手机号前(+86) 之类；prefix 为前置预填充组件，可自由设置，更为灵活，但不能与 prefixText 同时使用；prefixStyle 为预填充组件样式；
suffix... 为文本框后置组件系列；与 prefix... 用法一致；
counter 系列为文本框右下角计数器，当设置 maxLengths 时通常会在右下角展示编辑字符数与整体数量比，可通过 counter 系列组件调整；counterText 为计数器展示内容；counterStyle 为计数器样式属性；
filled 为文本框是否颜色填充，只有 true 时，filledColor 才生效；
enabled 为文本框是否可用，false 为不可用，无法获取焦点；
alignLabelWithHint 用于 TextField 设置多行时，true 时覆盖将标签与 TextField 的中心对齐的默认行为，小菜尝试了多种情况下 true 和 false 状态，发现效果并不明显，有待继续研究；
border 为一个系列，包括各种环境下边框；默认 border 为正常状态下边框；边框基本包括三类：
a. InputBorder 一般设置为无边框样式；
b. UnderlineInputBorder 一般设置为底部一条直线边框样式；小菜测试时设置边框圆角为 10dp 加上背景色效果更明显；
c. OutlineInputBorder 一般设置为包围的圆角边框；相较于 UnderlineInputBorder 多了 gapPadding 属性，用于浮动的 labelText 与边框的间距；
小菜测试发现 UnderlineInputBorder 和 OutlineInputBorder 对于设置 border 边框颜色无效，需要通过 ThemeData 来更改属性；
enabledBorder 为可用时边框样式，enabled 为 true；
Tips:
errorText 存在时 enabledBorder 不生效；
若不设置其他 border 属性，获取焦点默认是 ThemeData 中焦点边框，设置 border 或 focusedBorder 等生效；
disabledBorder 为不可用时边框，enabled 为 false；且 errorText 存在时 disabledBorder 不生效；
focusedBorder 为获取焦点时边框，errorText 存在时 focusedBorder 不生效；
errorBorder 为 errorText 不为空且未获取焦点时边框；
focusedErrorBorder 为 errorText 不为空且获取焦点时边框；
小扩展
在实际开发中，可能回随时需要关闭键盘，此时我们仅需监听一下即可；小菜监听一个文本输入框，当输入字符长度大于 11 位时即收起键盘；
文本输入框确实有很多细节需要研究和尝试，小菜仅初步了解，有待深入研究；且小菜建议时常升级 Flutter 版本，可能对于同一个 Widget 会有或多或少的更新，如有问题请多多指导！
来源： 阿策小和尚
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/ba1056aaa1692554192d71a70】。文章转载请联系作者。
还未添加个人签名 2021.05.13 加入
Android / Flutter 小菜鸟～
评论