HarmonyOS NEXT-表单智能自动填充

介绍

本示例展示了使用智能填充服务提供场景化的输入建议，实现复杂表单一键填充，帮助用户轻松地完成表单填写。

使用时需要引用程序框架服务接口@kit.AbilityKit

效果预览

主页	剪贴板推荐	华为账号推荐

历史表单输入保存	历史表单输入更新	历史表单输入推荐

前提条件

1. 设备智能填充开关必须处于打开状态。请前往“设置”->“隐私和安全”->“智能填充”打开智能填充功能。
2. 应用/元服务的输入组件的ContentType属性配置对应场景，即可触发智能填充功能。

工程目录

entry
  └─src                     
    ├─main                
    │  ├─ets              
    │  │  ├─entryability         // 程序入口类
    │  │    ├──EntryAbility.ets   // 本地启动ability
    │  │  └─pages
    │  │    ├──Index.ets         // 入口界面
    │  │    ├──Demo.ets          // 演示示例
    │  │    ├──ShipToAddress.ets      // 收货地址
    │  │    └──Purchase.ets      // 购票
    │  └─resources        
    │      ├─base         
    │      │  ├─element          // 颜色、字体、字符串等资源
    │      │  ├─media            // 图片等资源  
    │      │  └─profile          // 页面配置

具体实现

智能填充功能演示在\entry\src\main\ets\pages\Index.ets， 这些输入组件已设置contentType属性，点击对应输入组件触发智能填充功能。

相关权限

无

官方参考

开发指南

代码实现

Demo.ets

import { autoFillManager } from '@kit.AbilityKit';

let storages = LocalStorage.getShared();

@Entry(storages)
@Component
struct Demo {
  @State isClicked: boolean = false;

  aboutToAppear() {
  }

  build() {
    Column({ space: 5 }) {
      Row() {
        Text('姓名：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.PERSON_FULL_NAME)
      }

      Row() {
        Text('手机号：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%')
          .contentType(ContentType.PHONE_NUMBER)
          .type(InputType.Normal)
      }

      Row() {
        Text('邮箱：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.EMAIL_ADDRESS)
      }

      Row() {
        Text('身份证号：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.ID_CARD_NUMBER)
      }

      Row() {
        Text('带街道的详细地址：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.FULL_STREET_ADDRESS)
      }

      Button('保存')
        .onClick(() => {
          if (!this.isClicked) {
            autoFillManager.requestAutoSave(this.getUIContext())
            this.isClicked = true;
          }
          setTimeout(() => {
            this.isClicked = false;
          }, 3000)
        })
    }
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

Index.ets

import { router } from '@kit.ArkUI';

let storages = LocalStorage.getShared();

@Entry(storages)
@Component
struct Hello {
  @State isClicked: boolean = false;

  aboutToAppear() {
  }

  build() {
    Column({ space: 5 }) {
      Button('演示示例')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Demo'
          })
        })

      Button('购票场景')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/PurchaseTicket'
          })
        })

      Button('收货场景')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/ShipToAddress'
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

function Space() {
  throw new Error('Function not implemented.');
}

PurchaseTicket.ets

import { autoFillManager } from '@kit.AbilityKit';

@Entry
@Component
struct PurchaseTicket {
  @State isClicked: boolean = false;

  aboutToAppear() {
  }

  build() {
    Column({ space: 5 }) {
      Row() {
        Text('姓名：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.PERSON_FULL_NAME)
      }

      Row() {
        Text('凭证类型：').textAlign(TextAlign.End).width('25%')
        Select([{ value: '身份证' }, { value: '临时通行证' }, { value: '护照' }])
          .width('75%')
          .selected(0)
          .value('身份证')
      }

      Row() {
        Text('凭证号码：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.ID_CARD_NUMBER)
      }

      Row() {
        Text('手机号码：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%')
          .contentType(ContentType.PHONE_NUMBER)
          .type(InputType.Normal)
      }

      Button('确定')
        .onClick(() => {
          if (!this.isClicked) {
            autoFillManager.requestAutoSave(this.getUIContext())
            this.isClicked = true;
          }
          setTimeout(() => {
            this.isClicked = false;
          }, 3000)
        })
        .width('90%')
    }
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

ShipToAddress.ets

import { autoFillManager } from '@kit.AbilityKit';

@Entry
@Component
struct ShipToAddress {
  @State isClicked: boolean = false;

  aboutToAppear() {
  }

  build() {
    Column({ space: 5 }) {
      Row() {
        Text('姓名：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.PERSON_FULL_NAME)
      }

      Row() {
        Text('手机号码：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%')
          .contentType(ContentType.PHONE_NUMBER)
          .type(InputType.Normal)
      }

      Row() {
        Text('邮件：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%')
          .contentType(ContentType.EMAIL_ADDRESS)
      }

      Row() {
        Text('地址：').textAlign(TextAlign.End).width('25%')
        TextInput().width('75%').contentType(ContentType.FULL_STREET_ADDRESS)
      }

      Button('确定')
        .onClick(() => {
          if (!this.isClicked) {
            autoFillManager.requestAutoSave(this.getUIContext())
            this.isClicked = true;
          }
          setTimeout(() => {
            this.isClicked = false;
          }, 3000)
        })
        .width('90%')
    }
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}