插件介绍

form_app 是一个功能丰富的 Flutter 表单示例应用，展示了各种表单类型和最佳实践。它提供了完整的表单解决方案，包括：

• 登录表单与HTTP请求：使用 package:http 发送登录请求的示例
• 多样化表单控件：集成 TextField、DatePicker、Slider、Checkbox、Switch 等多种表单控件
• 自动填充功能：使用 AutofillGroup 实现用户信息的自动填充
• 表单验证：提供完整的表单验证逻辑，确保数据输入的有效性

该应用采用 Material Design 风格，支持多平台部署，包括鸿蒙系统。通过学习和使用这个示例，开发者可以快速掌握 Flutter 表单开发的核心技术和最佳实践。

使用步骤

1. 包的引入

由于这是一个自定义修改版本的三方库，需要以 git 形式引入。在引用的项目中，在 pubspec.yaml 文件的 dependencies 部分添加以下配置：

dependencies:
  form_app:
    git:
      url: "https://atomgit.com/"
      path: "packages/form_app/form_app"

然后执行 flutter pub get 命令获取依赖包。

2. 基本配置

在鸿蒙应用中，需要确保已正确配置相关权限。form_app 应用需要网络权限来支持 HTTP 请求功能，因此需要在 ohos/entry/src/main/module.json5 中添加以下权限声明：

"requestPermissions": [
  {"name" : "ohos.permission.INTERNET"}
]

3. API 调用与使用示例

form_app 提供了多个表单示例页面，每个页面展示不同的表单功能。以下是主要功能模块的使用示例：

3.1 表单控件示例

import 'package:form_app/src/form_widgets.dart';

// 在 Widget 树中使用 FormWidgetsDemo
FormWidgetsDemo();

这个示例展示了如何使用各种表单控件，包括：

• 文本输入框（带标签和提示文本）
• 多行文本输入框（用于描述信息）
• 日期选择器
• 滑块（用于数值选择）
• 复选框
• 开关控件

3.2 表单验证示例

import 'package:form_app/src/validation.dart';

// 在 Widget 树中使用 FormValidationDemo
FormValidationDemo();

这个示例展示了如何实现表单验证逻辑：

• 自定义验证函数
• 实时验证反馈
• 表单提交处理
• 错误信息展示

3.3 登录表单与HTTP请求

import 'package:form_app/src/sign_in_http.dart';
import 'package:form_app/src/http/mock_client.dart';

// 使用模拟客户端创建登录表单
SignInHttpDemo(httpClient: mockClient);

这个示例展示了如何：

• 创建登录表单
• 处理表单提交
• 发送HTTP请求
• 处理响应结果

3.4 自动填充功能

import 'package:form_app/src/autofill.dart';

// 使用自动填充表单
AutofillDemo();

这个示例展示了如何使用 AutofillGroup 实现：

• 姓名自动填充
• 邮箱自动填充
• 地址自动填充

核心API介绍

表单状态管理

final _formKey = GlobalKey<FormState>();

// 验证表单
var valid = _formKey.currentState!.validate();

// 重置表单
_formKey.currentState!.reset();

表单控件

TextFormField

TextFormField(
  decoration: const InputDecoration(
    filled: true,
    hintText: 'Enter a title...',
    labelText: 'Title',
  ),
  onChanged: (value) {
    setState(() {
      title = value;
    });
  },
  validator: (value) {
    if (value!.isEmpty) {
      return 'Please enter a title.';
    }
    return null;
  },
)

DatePicker

_FormDatePicker(
  date: date,
  onChanged: (value) {
    setState(() {
      date = value;
    });
  },
)

Slider

Slider(
  min: 0,
  max: 500,
  divisions: 500,
  value: maxValue,
  onChanged: (value) {
    setState(() {
      maxValue = value;
    });
  },
)

Checkbox

Checkbox(
  value: brushedTeeth,
  onChanged: (checked) {
    setState(() {
      brushedTeeth = checked;
    });
  },
)

Switch

Switch(
  value: enableFeature,
  onChanged: (enabled) {
    setState(() {
      enableFeature = enabled;
    });
  },
)

鸿蒙适配说明

form_app 已针对鸿蒙系统进行了适配，主要包括：

1. 权限配置：在 module.json5 中声明了网络权限
2. 资源适配：提供了鸿蒙系统所需的应用图标和资源文件
3. 入口配置：实现了鸿蒙系统的应用入口和能力声明
4. 多平台兼容性：确保代码在鸿蒙系统上能够正常运行

总结

form_app 是一个全面的 Flutter 表单开发示例，展示了各种表单控件和功能的最佳实践。通过这个示例，开发者可以学习到：

• 如何创建和管理表单
• 如何使用各种表单控件
• 如何实现表单验证
• 如何处理表单提交和网络请求
• 如何实现自动填充功能

该应用已适配鸿蒙系统，可以直接在鸿蒙设备上运行。通过以 git 形式引入包，开发者可以轻松将其集成到自己的项目中，并根据需要进行定制和扩展。

欢迎加入开源鸿蒙跨平台社区

如果您对鸿蒙跨平台开发感兴趣，欢迎加入我们的社区：

https://openharmonycrossplatform.csdn.net

在社区中，您可以获取更多关于鸿蒙跨平台开发的资源和支持，与其他开发者交流经验，共同推动开源生态的发展。