深入探索扑朔迷离的文字菲尔德
flutter中文字场的力量的教程
这是一系列文章中的第二篇文章,详细解释了一些小部件扑朔迷离的提供和技巧。在上一篇文章中我们详细浏览了ListView小部件。在本文中,我们全面地进入了Textfield窗口小部件,并找出其功能和可能的自定义。
文章简介
Textfield小部件允许从用户收集信息。基本文本字段的代码很简单:
文本域()
这创建了一个基本的文字菲尔德:
从Textfield检索信息
由于TextFields没有像Android这样的ID,因此无法根据需要检索文本,而必须存储在更改或使用控制器的变量中。
- 最简单的方法是使用一点点方法并将当前值存储在简单变量中。这是它的示例代码:
细绳价值=“”;文本域(
onchanged :(文本){
价值= text;
},,
)
2.第二种方法是使用TexteditingController。控制器连接到文本场,使我们也可以聆听和控制文本字段的文本。
TexteditingController控制器= texteditingController();文本域(
控制器:控制器,,,,
)
我们可以听取更改的方式
控制器.addlistener((){
//在这里做某事
});
并使用
打印(控制器。文本);//打印当前价值
控制器。文本=“演示文字”;//设置新值
来自Textfield的其他回调
Textfield小部件还提供其他回调,例如
- 开启结束
- 求婚
Onediting -Complete :(){},onsubmittit :( value){},
这些是对操作的回调,例如用户在iOS上单击“完成”按钮时。
在Textfields中使用重点
对文本字段的“重点”意味着要使TextField处于活动状态,并且来自键盘的任何输入都将导致专注的TextField中输入的数据。
1.使用自动对焦
要在创建小部件时在文本字段上自动对焦,请将自动对焦字段设置为true。
文本域(
自动对焦:真的,,,,
),
默认情况下,这将重点放在TextField上。
2.使用自定义重点更改
如果我们想改变对需求的重点,而不仅仅是自动对焦怎么办?由于我们需要某种方式参考哪个Textfield我们希望将重点放在接下来,我们将焦点诺德连接到TextField并使用它来切换焦点。
//构建方法之外的初始化
FocusNode节点= focusnode();
FocusNodenodetwo= focusnode();//在构建方法中执行此操作
文本域(
FocusNode:节点,,,,
),
文本域(
FocusNode:nodetwo,,,,
),
risedbutton(
onpressed :(){
焦点。的(上下文).requeStfocus(nodetwo);
},,
孩子:文字(“下一个字段”),
),
我们创建两个焦点节点,并将其附加到Textfields。按下按钮时,我们使用pocusscope向下一个TextField请求焦点。
更改Textfields的键盘属性
Flutter中的Textfield允许您自定义与键盘相关的属性。
1.键盘类型
Textfield允许您自定义键盘类型当Textfield成为焦点时,这会显示出来。我们改变了键盘类型为此的属性。
文本域(
键盘类型:textInputType。数字,,,,
),
类型是:
- textInputType.text(正常完整键盘)
- textinputtype.number(数值键盘)
- textInputType.emailAddress(带有“@”的普通键盘)
- textInputType.dateTime(具有“/”和“:”的数值键盘)
- textInputType.numberwithOptions(具有启用签名和十进制模式的选项的数值键盘)
- textInputType.multiline(对多行信息进行优化)
2.文本输入
更改Textfield的TextInputation使您可以更改键盘的动作按钮本身。
举个例子:
文本域(
textInputaction:textInputaction。连续,,,,
),
这导致“完成”按钮被“继续”按钮替换:
或者
文本域(
textInputaction:textInputaction。发送,,,,
),
原因
完整的列表太大了,无法在此处显示,但是请确保检查一下。
3。自动更正
启用或禁用特定文本字段的自动更正。使用自动更正字段来设置此设置。
文本域(
自动更正:错误的,,,,
),
这也将禁用建议。
4.文本大写
Textfield提供了一些有关如何在用户输入中大写字母的选项。
文本域(
文本资本化:文本资本化。句子,,,,
),
类型是:
- 文本资本化
这是我们期望的正常资本化类型,是每个句子都被大写的首字母。
2。textCapital.character
大写句子中的所有字符。
3。textCapitalization.words
大写每个单词的第一个字母。
文本样式,对齐和光标选项
Flutter允许自定义与文本内部文本以及文本内部光标的样式和对齐有关的自定义化。
文本字段内的文本对齐
使用TextAlign属性调整光标在TextField内部的位置。
文本域(
TextAlign:TextAlign。中心,,,,
),
这会导致光标和文本从文本场的中间开始。
这具有通常的对齐属性:开始,末端,左,右,中心,合理。
在文本场内造型文本
我们使用风格属性,以更改文本字段内的文本外观。使用它来更改颜色,字体大小等。这类似于文本小部件中的样式属性,因此我们不会花太多时间探索它。
文本域(
样式:textstyle(颜色:颜色。红色的,轻量级:输水。W300),
),
更改文字场中的光标
光标是直接从Textfield小部件定制的。
您可以更改拐角的光标颜色,宽度和半径。例如,在这里,我没有明显的原因制作一个圆形红色光标。
文本域(
光泽:颜色。红色的,,,,
cursorradius:radius.circular(16.0),,
Cursorwidth:16.0,
),
控制文本场中的尺寸和最大长度
Textfields可以控制其中写入的字符数量的最大数量,最大线数并在键入文本时扩展。
控制最大字符
文本域(
最大长度:4,
),
通过设置MaxLength属性,可以执行最大长度,并默认向TextField添加计数器。
制作可扩展的文字场
有时,我们需要一个文本字段,该文本字段在一行完成后会扩展。在颤动中,这有点奇怪(但很容易)。去做这个,我们将最大值设置为null,默认情况下为1。设置为Null并不是我们非常习惯的事情,但是尽管如此,它很容易做到。
注意:将最大值设置为直接值将默认情况下将其扩展到该线数。
文本域(
maxlines:3,
)
晦涩的文字
要模糊文本中的文本,请将smbseText设置为true。
文本域(
begburetext:真的,,,,
),
最后,装饰文字菲尔德
到目前为止,我们专注于扑朔迷离的输入提供的功能。现在,我们将真正设计一个精美的文字菲尔德,而不是对您的设计师拒绝。
为了装饰文字场,我们使用装饰采用输入任务的属性。由于输入任务类是巨大的,因此我们将尝试快速介绍大多数重要属性。
使用提示和标签属性向用户提供信息
提示和标签都是字符串,可帮助用户了解要在TextField中输入的信息。不同之处在于,一旦用户开始键入,标签在文本场上浮动时就会消失。
您可以使用“图标”,“ prefixicon”和“ suffixicon”添加图标
您可以将图标直接添加到Textfields。您也可以将prefixText和suffixText用于文本。
文本域(
装饰:输入装修(
图标:图标(图标。打印)
),
),
文本域(
装饰:输入装修(
前缀:图标(图标。打印)
),
),
类似地,对于任何其他小部件,请使用“前缀”代替“ prefixicon”
要使用通用小部件代替图标,请使用前缀字段。再次出于明显的原因,让我们在文本场中添加一个循环进度指示器。
文本域(
装饰:输入装修(
前缀:循环progressIndicator(),
),
),
每个属性等提示,标签等都有其各自的样式字段
要设计提示,请使用hintstyle。要设计标签,请使用标签风格。
文本域(
装饰:输入装修(
hinttext:“演示文字”,,,,
HintStyle:TextStyle(fontaight:fontauight。W300,颜色:颜色。红色的)
),
),
注意:尽管我在此示例中做到了,但通常不会更改提示颜色,因为它会使用户混淆。
如果您不想要标签,请使用“ helpertext”,但要为用户提供持久消息。
文本域(
装饰:输入装修(
helpertext:“你好”
),
),
使用“装饰:null”或InputDecoration.collaps删除Textfield上的默认下划线
使用这些删除文本字段上的默认下划线。
文本域(
装饰:inputDecoration.Collapsed(shinttext:“”)
),
使用“边界”为Textfield提供边界
文本域(
装饰:输入装修(
边界:outlineinputborder()
)
),
您可以进一步做大量的装饰,但是我们不能在一篇文章中参与其中。但是我希望这清楚地了解自定义flutter Textfields是多么容易。
就是本文!我希望您喜欢它,如果您这样做,请留下一些拍手。关注我以获取更多的颤抖文章,并评论您对本文可能会有的任何反馈。
请随时查看我的其他个人资料和文章: