HarmonyOS鸿蒙NEXT智能填充案例

HarmonyOS鸿蒙NEXT智能填充案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/smartfill

本案例已上架 HarmonyOS NEXT 开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

本示例介绍了使用智能填充自动补充表单的功能。该场景多用于需要使用多个填充相同表单的场景。

使用说明：

• 点击地址栏，弹出添加地址场景框。
• 点击其中一个输入框，弹出智能填充选项。

实现步骤

实现智能填充表单，有两个关键点，首先需要应用开通智能填充服务权限；然后设备智能填充开关必须处于打开状态。详情请见智能填充。

1. 识别智能填充主要依赖输入框内的ContentType属性。所以需要将输入框内加上对应的ContentType属性。

    ```typescript
    TextInput({ text: this.text })
      .id(this.componentId)
      .width(CommonConstants.WIDTH_FULL)
      .backgroundColor(Color.White)
      .contentType(this.contentType) // 选择对应的ContentType属性
    ```

2. 智能填充在页面发生跳转的时候，或者手动触发保存逻辑的时候，方可触发保存表单逻辑。

    ```typescript
    if (!this.isClicked) {
      // 主动触发保存历史表单输入
        autoFillManager.requestAutoSave(this.getUIContext())
      this.isClicked = true;
      // 设置超时时间以防止重复点击按钮保存历史表单输入
      setTimeout(() => {
        this.isClicked = false;
      }, 1000)
    }
    ```

3. 若在页面中也提供了弹窗提醒填充建议的功能，为避免弹窗冲突，建议您将对应输入组件的enableAutoFill属性设置为“false”以关闭智能填充功能。本案例未设置填充提醒功能，故无需设置关闭填充功能。

高性能知识点

不涉及

工程结构&模块类型

smartfill                                  // har
|--common
|   |--CommonContants.ets.ets             // 常量文件
|--components                             // 组件文件
|--view
    |--SmartFill.ets                      // 案例页面

模块依赖

不涉及

参考资料

智能填充