在harmony中它提供了默认的组件PatternLock()；
这个就能直接显示九宫格密码验证
并且他有两个主要的回调事件
.onDotConnect密码输入选中宫格圆点时触发该回调
.onPatternComplete：密码输入结束时触发该回调

//如代码实现

PatternLock()
  .sideLength(320)// 宽高
  .circleRadius(12)// 圆点半径
  .pathStrokeWidth(10)// 线宽度
  .regularColor('#ffd9d9d9')// 未选中圆点色
  .activeColor('#800a59f7')// 经过圆点色
  .selectedColor('#ff0a59f7')// 选中圆点色
  .pathColor('#cc0a59f7')// 线颜色
  .onDotConnect(() => {
    // 密码输入选中宫格圆点时触发该回调
  })
  .onPatternComplete((input: number[]) => {
    // 密码输入结束时触发该回调
  })

// 手势组件控制器
private patternLockController: PatternLockController = new PatternLockController()
setErrorMessage(message: string) {
this.errorMessage = message
this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
}
clearErrorMessage() {
this.errorMessage = ''
this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
}
// 重置图形密码和临时密码
resetPattern() {
// 每次输入结束后，自动清空界面图形
this.timeoutID = setTimeout(() => {
// 重置图形密码
this.patternLockController.reset()
// 重置临时密码
this.inputPassword = []
}, 1000)
}
// 手势密码输入完成
onPatternComplete(input: number[]) {
// 保存临时密码
this.inputPassword = input
// 1. 校验长度，输入长度小于 4，提示重新输入
if (this.inputPassword.length < 4) {
// 设置错误提示
this.setErrorMessage('手势密码长度不能小于4位，请重新输入')
} else {
// 清空错误提示
this.clearErrorMessage()
// 2. 长度符合规范，同时判断是否为首次输入
if (this.firstPassword.length === 0) {
// 2.1 首次输入，直接保存当前输入的密码
this.firstPassword = input
} else {
// 2.2 非首次输入，需判断两次输入的密码是否相同
}
}
// 每次输入结束后，自动清空界面图形
this.resetPattern()
}
build(){
PatternLock(this.patternLockController)
.sideLength(320)// 宽高
.circleRadius(12)// 圆点半径
.pathStrokeWidth(10)// 线宽度
.regularColor('#d9d9d9')// 未选中圆点色
.activeColor('#800a59f7')// 经过圆点色
.selectedColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ffff5e5d' : '#ff0a59f7')// 选中圆点色
.pathColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ccff5e5d' : '#cc0a59f7')// 线颜色
.onDotConnect(() => {
// 密码输入选中宫格圆点时触发该回调
clearTimeout(this.timeoutID)
})
.onPatternComplete((input: number[]) => {
this.onPatternComplete(input)
})
}