文本框的创建和设定
文本框作为一个接收用户输入的组件,被广泛应用于表单构建、即时通讯、搜索等场景中。
Text fields allow users to type text into an app. They are used to build forms, send messages, create search experiences, and more. In this recipe, explore how to create and style text fields.
Flutter 提供了两个开箱即用的文本框组件:
TextField
和 TextFormField
。
Flutter provides two text fields:
TextField
and TextFormField
.
文本框
TextField
TextField
是最常用的文本输入组件。
TextField
is the most commonly used text input widget.
TextField
组件的默认样式是带有下划线的装饰样式。如果需要自定义装饰样式(添加标签、图标、提示文本和错误文本),可以将 InputDecoration
应用到 TextField
的 decoration
属性上。如果需要完全移除下划线和标签预留空间,可以将 decoration
属性设置为 null。
By default, a TextField
is decorated with an underline.
You can add a label, icon, inline hint text, and error text by supplying an
InputDecoration
as the decoration
property of the TextField
.
To remove the decoration entirely (including the
underline and the space reserved for the label),
set the decoration
to null.
TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter a search term'
),
);
要在内容发生变化时收到此内容,请参见 响应文本框内容的更改。
To retrieve the value when it changes, see the Handle changes to a text field recipe.
表单文本框
TextFormField
TextFormField
内部封装了一个 TextField
并被集成在表单组件 Form
中。如果需要对文本输入进行验证或者需要与其他表单组件 FormField
交互联动,可以考虑使用 TextFormField
。
TextFormField
wraps a TextField
and integrates it
with the enclosing Form
.
This provides additional functionality,
such as validation and integration with other
FormField
widgets.
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your username'
),
);
查看章节 构建一个有验证判断的表单 获取更多关于输入验证的内容。
For more information on input validation, see the Building a form with validation recipe.