介绍

智能填充服务提供场景化的输入建议，完善应用/元服务的系统开发能力，实现用户对复杂表单的一键填充，助力打造HarmonyOS极致输入效率。

效果预览

点击表单中ContentType为“PERSON_FULL_NAME”（姓名）或“PERSON_LAST_NAME”（姓氏）、“PERSON_FIRST_NAME”（名字）的输入组件时，将同时推荐表单中其他ContentType类型的数据（以下统称多输入框场景）。

点击其他ContentType的输入组件时，只会推荐对应场景数据。例如点击ContentType为“NICKNAME”（昵称）的输入组件时，仅会在弹窗中推荐昵称数据（以下统称单输入框场景）。

image.png

前提条件

image.png

具体实现

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.');
}

PurchaseVoucher.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%')
  }
}

Address.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%')
  }
}