表格交互实用教程 | 文本框的创建和设定

640?wx_fmt=jpeg

文本框作为一个接收用户输入的组件,被广泛应用于表单构建、即时通讯、搜索等场景中。

Flutter 提供了两个开箱即用的文本框组件:TextField 和 TextFormField

1. 文本框

TextField 是最常用的文本输入组件。

TextField 组件的默认样式是带有下划线的装饰样式。如果需要自定义装饰样式(添加标签、图标、提示文本和错误文本),可以将 InputDecoration 应用到 TextField 的 decoration 属性上。如果需要完全移除下划线和标签预留空间,可以将 decoration 属性设置为 null。

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Enter a search term'
  ),
);

2. 表单文本框

TextFormField  内部封装了一个  TextField  并被集成在表单组件  Form  中。 如果需要对文本输入进行验证或者需要与其他表单组件  FormField  交互联动,可以考虑使用  TextFormField
TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your username'
  ),
);

查看章节 获取更多关于输入验证的内容。

640?wx_fmt=png


相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页