Flutter 基础篇（九），轻松拿到了阿里前端高级开发工程师的offer

最新推荐文章于 2024-10-17 15:03:48 发布

m0_60667406

最新推荐文章于 2024-10-17 15:03:48 发布

阅读量912

点赞数 19

分类专栏： 2024年程序员学习文章标签： flutter 前端

本文链接：https://blog.csdn.net/m0_60667406/article/details/137213811

版权

2024年程序员学习专栏收录该内容

277 篇文章 0 订阅

订阅专栏

在 Material 组件库中，提供了 TextField 和 Form 分别来表示输入框和表单。

TextField

TextField 用于文本输入，它提供了很多属性，先来看它的定义：

const TextField({

…

TextEditingController controller,

FocusNode focusNode,

InputDecoration decoration = const InputDecoration(),

TextInputType keyboardType,

TextInputAction textInputAction,

TextStyle style,

TextAlign textAlign = TextAlign.start,

bool autofocus = false,

bool obscureText = false,

int maxLines = 1,

int maxLength,

bool maxLengthEnforced = true,

ValueChanged onChanged,

VoidCallback onEditingComplete,

ValueChanged onSubmitted,

List inputFormatters,

bool enabled,

this.cursorWidth = 2.0,

this.cursorRadius,

this.cursorColor,

…

})

controller —— 编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下，我们都需要提供一个 controller 来与文本框进行交互。如果没有提供，则由 TextField 内部自动创建一个。
focusNode —— 用于控制 TextField 是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄。
InputDecoration —— 用于控制 TextField 的外观显示，如提示文本、背景颜色、边框等。
keyboardType —— 用于设置该输入框默认的键盘输入类型，取值如下：

| TextInputType枚举值 | 含义 |

| — | — |

| text | 文本输入键盘 |

| multiline | 多行文本，需要和 maxLines 配合 |

| number | 数字，*，# |

| datetime | 日期输入框 |

| emailAddress | 电子邮件输入框 |

| url | url输入框 |

textInputAction —— 键盘动作按钮图标（即回车键位置图标），可选值有多个，具体可参考API文档，下面的值是 TextInputAction.search ：

在这里插入图片描述

style ：—— 正在编辑的文本的样式
textAlign —— 输入框内编辑文本在水平方向的对齐方式
autofocus —— 是否自动获取焦点
obscureText —— 是否隐藏正在编辑的文本，如用于输入密码的场景，文本内容会被 * 代替
maxLines —— 输入框的最大行数，默认为1，如果设置为 null ，则表示无限
maxLength 和 maxLengthEnforced —— maxLength 代表输入框文本的最大长度，设置后输入框右下角会线束输入的文本计数。- maxLengthEnforced 决定当输入文本长度超过 maxLength 时是否阻止输入，为 true 时会阻止输入，为 false 时不会阻止输入但输入框会变红。
onChange —— 输入框内容改变时的回调函数
onEditingComplete 和 onSubmitted ：这两个回调函数都是在输入框输入完成时触发的，比如按了键盘的完成。不同的是两个函数的签名，onSubmitted 回调是 ValueChanged<String> 类型，它接收当前输入的内容作为参数，而 onEditingComplete 不接受参数。
inputFormatters —— 用于指定输入格式，当用户输入内容改变时，会根据指定的格式来校验。
enable —— 如果为 false，则输入框会被禁用，禁用状态不接受输入和事件。
cursorWidth 、cursorRadius 和 cursorColor —— 这三个属性用于自定义输入框的光标宽度、圆角和颜色。