出版于

扑打社区

深入探索扑朔迷离的文字菲尔德

flutter中文字场的力量的教程

文章简介

Textfield小部件允许从用户收集信息。基本文本字段的代码很简单:

文本域()

从Textfield检索信息

由于TextFields没有像Android这样的ID,因此无法根据需要检索文本,而必须存储在更改或使用控制器的变量中。

细绳价值=“”;文本域(
onchanged :(文本){
价值= text;
},,
TexteditingController控制器= texteditingController();文本域(
控制器:控制器,,,,
控制器.addlistener((){
//在这里做某事
});
打印(控制器文本);//打印当前价值
控制器
文本=“演示文字”;//设置新值

来自Textfield的其他回调

Textfield小部件还提供其他回调,例如

  1. 求婚
Onediting -Complete :(){},onsubmittit :( value){},

在Textfields中使用重点

对文本字段的“重点”意味着要使TextField处于活动状态,并且来自键盘的任何输入都将导致专注的TextField中输入的数据。

1.使用自动对焦

要在创建小部件时在文本字段上自动对焦,请将自动对焦字段设置为true。

文本域(
自动对焦:真的,,,,
),
默认情况下,焦点转移到Textfield

2.使用自定义重点更改

如果我们想改变对需求的重点,而不仅仅是自动对焦怎么办?由于我们需要某种方式参考哪个Textfield我们希望将重点放在接下来,我们将焦点诺德连接到TextField并使用它来切换焦点。

//构建方法之外的初始化
FocusNode节点= focusnode();
FocusNodenodetwo= focusnode();
//在构建方法中执行此操作
文本域(
FocusNode:节点,,,,
),
文本域(
FocusNode:nodetwo,,,,
),
risedbutton(
onpressed :(){
焦点。(上下文).requeStfocus(nodetwo);
},,
孩子:文字(“下一个字段”),
),
按下按钮时的重点更改

更改Textfields的键盘属性

Flutter中的Textfield允许您自定义与键盘相关的属性。

1.键盘类型

Textfield允许您自定义键盘类型当Textfield成为焦点时,这会显示出来。我们改变了键盘类型为此的属性。

文本域(
键盘类型:textInputType。数字,,,,
),
  1. textinputtype.number(数值键盘)
  2. textInputType.emailAddress(带有“@”的普通键盘)
  3. textInputType.dateTime(具有“/”和“:”的数值键盘)
  4. textInputType.numberwithOptions(具有启用签名和十进制模式的选项的数值键盘)
  5. textInputType.multiline(对多行信息进行优化)

2.文本输入

更改Textfield的TextInputation使您可以更改键盘的动作按钮本身。

文本域(
textInputaction:textInputaction。连续,,,,
),
文本域(
textInputaction:textInputaction。发送,,,,
),

3。自动更正

启用或禁用特定文本字段的自动更正。使用自动更正字段来设置此设置。

文本域(
自动更正:错误的,,,,
),

4.文本大写

Textfield提供了一些有关如何在用户输入中大写字母的选项。

文本域(
文本资本化:文本资本化。句子,,,,
),

文本样式,对齐和光标选项

Flutter允许自定义与文本内部文本以及文本内部光标的样式和对齐有关的自定义化。

文本字段内的文本对齐

使用TextAlign属性调整光标在TextField内部的位置。

文本域(
TextAlign:TextAlign。中心,,,,
),

在文本场内造型文本

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

文本域(
样式:textstyle(颜色:颜色。红色的,轻量级:输水。W300),
),

更改文字场中的光标

光标是直接从Textfield小部件定制的。

文本域(
光泽:颜色。红色的,,,,
cursorradius:radius.circular(16.0),,
Cursorwidth:16.0,
),

控制文本场中的尺寸和最大长度

Textfields可以控制其中写入的字符数量的最大数量,最大线数并在键入文本时扩展。

控制最大字符

文本域(
最大长度:4,
),

制作可扩展的文字场

有时,我们需要一个文本字段,该文本字段在一行完成后会扩展。在颤动中,这有点奇怪(但很容易)。去做这个,我们将最大值设置为null,默认情况下为1。设置为Null并不是我们非常习惯的事情,但是尽管如此,它很容易做到。

文本域(
maxlines:3,

晦涩的文字

要模糊文本中的文本,请将smbseText设置为true。

文本域(
begburetext:真的,,,,
),

最后,装饰文字菲尔德

到目前为止,我们专注于扑朔迷离的输入提供的功能。现在,我们将真正设计一个精美的文字菲尔德,而不是对您的设计师拒绝。

使用提示和标签属性向用户提供信息

提示和标签都是字符串,可帮助用户了解要在TextField中输入的信息。不同之处在于,一旦用户开始键入,标签在文本场上浮动时就会消失。

暗示
标签

您可以使用“图标”,“ prefixicon”和“ suffixicon”添加图标

您可以将图标直接添加到Textfields。您也可以将prefixText和suffixText用于文本。

文本域(
装饰:输入装修(
图标:图标(图标。打印
),
),
使用图标属性图标
文本域(
装饰:输入装修(
前缀:图标(图标。打印
),
),
使用prefixicon属性图标

类似地,对于任何其他小部件,请使用“前缀”代替“ prefixicon”

要使用通用小部件代替图标,请使用前缀字段。再次出于明显的原因,让我们在文本场中添加一个循环进度指示器。

文本域(
装饰:输入装修(
前缀:循环progressIndicator(),
),
),

每个属性等提示,标签等都有其各自的样式字段

要设计提示,请使用hintstyle。要设计标签,请使用标签风格。

文本域(
装饰:输入装修(
hinttext:“演示文字”,,,,
HintStyle:TextStyle(fontaight:fontauight。W300,颜色:颜色。红色的
),
),

如果您不想要标签,请使用“ helpertext”,但要为用户提供持久消息。

文本域(
装饰:输入装修(
helpertext:“你好”
),
),

使用“装饰:null”或InputDecoration.collaps删除Textfield上的默认下划线

使用这些删除文本字段上的默认下划线。

文本域(
装饰:inputDecoration.Collapsed(shinttext:“”
),

使用“边界”为Textfield提供边界

文本域(
装饰:输入装修(
边界:outlineinputborder()

),

就是本文!我希望您喜欢它,如果您这样做,请留下一些拍手。关注我以获取更多的颤抖文章,并评论您对本文可能会有的任何反馈。

请随时查看我的其他个人资料和文章:

我的其他一些文章

- -

- -

获取中型应用betway娱乐官网

一个说“在应用商店上下载”的按钮,如果单击,它将带您到iOS App Store
一个说“获取它,Google Play”的按钮,如果单击它,它将带您到Google Play商店
Deven Joshi

Google开发人员专家,Flutter |技术作家|扬声器

Baidu