深入Flutter TextField

FocusScope.of(context).requestFocus(nodeTwo);
},
child: Text(“Next Field”),
),

这里我们创建了两个focus node并且将他们依附到TextField上，当点击NextField按钮时，使用FocusScope去为下一个TextField申请获取焦点。

TextField更换键盘属性

在Flutter中，TextField允许你定制和键盘相关的属性。

1.键盘类型

TextField可以在弹出键盘的时候修改键盘类型。使用以下代码：

TextField(
keyboardType: TextInputType.number,
),

类型有如下几种：

• TextInputType.text (Normal complete keyboard)
• TextInputType.number (A numerical keyboard)
• TextInputType.emailAddress (Normal keyboard with an “@”)
• TextInputType.datetime (Numerical keyboard with a “/” and “:”)
• TextInputType.multiline (Numerical keyboard with options to enabled signed and decimal mode)

2.键盘操作按钮行为

更改TextField的textInputAction可以更改键盘本身的操作按钮。

//发送操作
TextField(
textInputAction: TextInputAction.send,
),

完整的行为列表太长，这里不做展示了，需要的可以进入TextInputAction类查看。

启用或禁用特定TextField的自动更正。使用自动更正字段进行设置。这同时也会禁用输入建议。

TextField(
autocorrect: false,
),

3.文本大写

TextField提供了一些选项，用来对用户输入的文本大写化。

TextField(
textCapitalization: TextCapitalization.sentences,
),

1.TextCapitalization.sentences

这是最常见的大写化类型，每个句子的第一个字母被转换成大写。

2.TextCapitalization.characters

大写句子中的所有字符。

3. TextCapitalization.words

对每个单词首字母大写。

文本对齐

使用textAlign属性设置TextField内的光标对齐方式。

TextField(
textAlign: TextAlign.center,
),

光标和文字会从TextField组件中间开始。

还有其他属性包括，start, end, left, right, center, justify.

文本样式

我们使用style属性来更改TextField内部文本的外观。 使用它来更改颜色，字体大小等。这类似于文本小部件中的样式属性，因此我们不会花太多时间来探索它。

TextField(
style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),

更换光标样式

可以直接从TextField小部件自定义光标。 您可以更改角落的光标颜色，宽度和半径。 例如，这里我制作一个圆形的红色光标。

TextField(
cursorColor: Colors.red,
cursorRadius: Radius.circular(16.0),
cursorWidth: 16.0,
),

控制最大字符数

TextField(
maxLength: 4,
),

设置maxLength属性后，TextField会默认添加一个长度计数器。

可扩展TextField

有时，我们需要一个TextField，当一行完成时会扩展。 在Flutter中，它有点奇怪（但很容易）。 为此，我们将maxLines设置为null，默认为1。 设置为null不是我们习以为常的东西，但是它很容易做到。

注意：将maxLines属性设置为一个确定的数值，会将TextField直接扩大到对应的最大行

TextField(
maxLines: 3,
)

隐藏文本内容

TextField(
obscureText: true,
),

装饰TextField

到目前为止，我们专注于Flutter提供的输入功能。 现在我们将实际设计一个花哨的TextField。 为了装饰TextField，我们使用带有InputDecoration的decoration属性。 由于InputDecoration类非常庞大，我们将尝试快速查看大多数重要属性。

hint和label

hint:

label:

图标

//输入框外图标
TextField(
decoration: InputDecoration(
icon: Icon(Icons.print)
),
),
//前缀图标
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.print)
),
),

//输入框前缀组件
TextField(
decoration: InputDecoration(
prefix: CircularProgressIndicator(),
),
),

每个属性像hint，label都有各自的style设置

1.用hintstyle修改hint样式

TextField(
decoration: InputDecoration(
hintText: “Demo Text”,
hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
),
),

2.帮助性提示

和label不一样，它会一直显示在输入框下部

TextField(
decoration: InputDecoration(
helperText: “Hello”
),
),

3.使用decoration: null或者InputDecoration.collapsed可以去除默认的下划线。

TextField(

尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

TextField(

尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

[外链图片转存中…(img-4vAqT6gy-1715336132231)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！