介绍
本示例展示了使用智能填充服务提供场景化的输入建议,实现复杂表单一键填充,帮助用户轻松地完成表单填写。
使用时需要引用程序框架服务接口@kit.AbilityKit
效果预览
主页 | 剪贴板推荐 | 华为账号推荐 |
---|---|---|
| | |
历史表单输入保存 | 历史表单输入更新 | 历史表单输入推荐 |
---|---|---|
| | |
前提条件
- 设备智能填充开关必须处于打开状态。请前往“设置”->“隐私和安全”->“智能填充”打开智能填充功能。
- 应用/元服务的输入组件的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%')
}
}