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

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

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'

  ),

);

查看章节 表格交互实用教程 | 构建一个有验证判断的表单获取更多关于输入验证的内容。

最多阅读

在Flutter中添加资源和图片 1年以前  |  1945次阅读
发布Flutter开发的iOS程序 1年以前  |  1367次阅读
Flutter Widget框架概述 1年以前  |  1194次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1137次阅读
JSON和序列化 1年以前  |  1068次阅读
使用Inspector检查用户界面 1年以前  |  1049次阅读
Flutter的手势GestureDetector分析详解 9月以前  |  1013次阅读
Flutter框架概览 1年以前  |  1003次阅读
为Flutter应用程序添加交互 1年以前  |  971次阅读
使用自定义字体 1年以前  |  968次阅读
Flutter插件详解及其发布插件 8月以前  |  961次阅读
处理文本输入 1年以前  |  854次阅读
Flutter 状态管理指南之 Provider 9月以前  |  788次阅读
发布Flutter开发的Android程序 1年以前  |  780次阅读
使用包来开发Flutter应用 1年以前  |  777次阅读
编写国际化Flutter App 1年以前  |  758次阅读
Dart 语法预览 1年以前  |  732次阅读
使用平台通道编写平台特定的代码 1年以前  |  721次阅读
Flutter路由详解 9月以前  |  688次阅读