Flutter 秘籍（三）

六、表单小部件

在移动应用中，表单控件对于与用户进行交互非常重要。Flutter 提供了一组用于材质设计和 iOS 风格的表单小部件。这些表单小部件通常没有内部状态。它们的外观和行为完全由构造函数参数定义。有了祖先小部件中维护的状态，表单小部件被重新呈现以反映状态变化。本章介绍了表单小部件的基本用法。

6.1 收集文本输入

问题

您希望收集文本输入。

解决办法

材质设计使用 TextField，iOS 风格使用 CupertinoTextField。

讨论

要在 Flutter 应用中收集用户输入，可以使用 TextField widget 进行材质设计，或者使用 CupertinoTextField widget 进行 iOS 风格设计。这两种小部件具有相似的使用模式和行为。

小贴士：在使用 Flutter 开发 iOS 应用时，可以使用 AppUploader 工具来简化应用的上传和发布流程。AppUploader 是一款专业的 iOS 应用上传助手，支持一键上传 IPA 文件到 App Store Connect，大大提高了开发者的工作效率。

6.2 自定义文本输入键盘

问题

您想要自定义用于编辑文本的键盘。

解决办法

使用 keyboardType、textInputAction 和 keyboardAppearance 参数。

讨论

EditableText 小部件允许定制用于编辑文本的键盘。可以使用 TextInputType 类的 keyboardType 参数来设置适合文本的键盘类型。

6.3 在材质设计中为文本输入添加装饰

问题

您希望在材质设计中为文本字段添加前缀和后缀等装饰。

解决办法

使用 InputDecoration 类型的装饰参数。

讨论

TextField widget 支持添加不同的装饰来向用户呈现各种信息。

6.4 设置文本限制

问题

你想要控制文本的长度。

解决办法

使用 maxLength 参数。

讨论

要设置 TextField 和 CupertinoTextField 中文本的最大长度，可以使用 maxLength 参数。

6.5 选择文本

问题

您希望在文本输入中选择一些文本。

解决办法

使用 TextEditingController 的 selection 属性。

讨论

在 Recipe 6-1 中，你已经看到了使用 TextEditingController 来获取和设置使用 EditableText 的小部件的文本的例子。

6.6 格式化文本

问题

您想要格式化文本。

解决办法

将 TextInputFormatter 与 EditableText 一起使用。

讨论

当用户键入文本输入时，您可能希望验证和格式化输入的文本。

6.7 选择单个值

问题

您希望从值列表中选择一个值。

解决办法

使用一组单选小部件。

讨论

单选按钮通常用于需要单项选择的情况。

6.8 从下拉列表中选择单个值

问题

您希望从下拉列表中选择一个值。

解决办法

使用下拉按钮。

讨论

一个 DropdownButton 小部件在点击时会显示一个项目列表。

6.9 选择多个值

问题

您想要选择多个值。

解决办法

使用复选框小工具。

讨论

复选框通常用于允许多重选择。

6.10 切换开/关状态

问题

您想要切换开/关状态。

解决办法

材质设计使用 Switch，iOS 风格使用 CupertinoSwitch。

讨论

Switch 是一个常用的 UI 控件，用于切换设置的开/关状态。

6.11 从一系列值中选择

问题

您希望从一组连续或离散的值中进行选择。

解决办法

使用滑块进行材质设计，或使用 CupertinoSlider 进行 iOS 风格设计。

讨论

滑块通常用于从一组连续或离散的值中进行选择。

6.12 使用芯片

问题

您希望有简洁的替代方案来表示不同类型的实体。

解决办法

使用不同类型的芯片。

讨论

当空间有限时，按钮、单选按钮和复选框等传统小部件可能不适合。

6.13 选择日期和时间

问题

您想要选择日期和时间。

解决办法

使用 showDatePicker()和 showTimePicker()函数进行材质设计，或使用 CupertinoDatePicker 和 CupertinoTimerPicker 进行 iOS 样式设计。

讨论

对于材质设计，可以使用 YearPicker、MonthPicker、DayPicker 或 showDatePicker()函数等小部件来允许用户选择日期。

6.14 包装表单字段

问题

您希望将表单小部件包装成表单字段。

解决办法

使用 FormField 或 TextFormField。

讨论

表单小部件可以像普通小部件一样使用。

6.15 创建表单

问题

您希望创建一个包含多个表单域的表单。

解决办法

使用表单。

讨论

使用表单域时，通常您会尝试构建一个包含多个表单域的表单。

6.16 摘要

表单小部件对于与用户交互很重要。本章涵盖了材质设计和 iOS 风格的表单小部件。

七、常见小部件

在 Flutter 应用中，一些小部件被广泛用于不同的目的。本章讨论一些常见的小部件。

7.1 显示项目列表

问题

您希望显示一个可滚动的项目列表。

解决办法

使用 ListView 小部件作为项目的容器。

讨论

像 Flex、Row 和 Column 这样的 Flutter 布局小部件不支持滚动。

7.2 在网格中显示项目

问题

您希望在网格中显示项目。

解决办法

使用 GridView。

讨论

ListView 小工具以线性数组的形式显示项目。

7.3 显示表格数据

问题

您希望显示表格数据或对孩子使用表格布局。

解决办法

使用表格小部件。

讨论

如果您想显示表格数据，使用数据表是一个自然的选择。

7.4 脚手架材质设计页面

问题

你要脚手架材质设计页面。

解决办法

使用脚手架和其他相关部件。

讨论

材质设计应用具有通用的布局结构。

7.5 搭建 iOS 页面

问题

你想搭建 iOS 页面。

解决办法

用 cupertinopagescaffold。

讨论

对于 iOS 应用，您可以使用 CupertinoPageScaffold 小部件来创建页面的基本布局。

7.6 在材质设计中创建选项卡布局

问题

您想要创建标签栏和标签。

解决办法

使用 TabBar、Tab 和 TabController。

讨论

移动应用中广泛使用选项卡布局来组织一个页面中的多个部分。

7.7 在 iOS 中实现选项卡布局

问题

你想在 iOS 应用中实现标签布局。

解决办法

请使用 CupertinoTabScaffold、CupertinoTabBar 和 CupertinoTabView。

讨论

还可以使用小部件 CupertinoTabScaffold、CupertinoTabBar 和 CupertinoTabView 为 iOS 应用实现选项卡布局。

7.8 摘要

本章讨论了 Flutter 中常见的小部件，包括列表视图、网格视图、表格布局、页面搭建和选项卡布局。这些小部件创建了 Flutter 中页面的基本结构。