1.效果图 

2.设置手势页面代码

/*** 手势密码设置页面*/
@Entry
@Component
struct SettingGesturePage {/*** PatternLock组件控制器*/private patternLockController: PatternLockController = new PatternLockController()/*** 用来保存提示文本信息*/@State message: string = '请绘制解锁图案'/*** 用来保存手势密码*/@State password: Array<number> = []build() {Column({ space: 10 }) {Blank().layoutWeight(1)// 提示Text(this.message).fontSize(16).fontColor(Color.Red)// 手势组件PatternLock(this.patternLockController).sideLength(300).circleRadius(15).pathStrokeWidth(15).autoReset(true).margin({ top: 30, bottom: 30 }).onPatternComplete((input: Array<number>) => {// 根据实际需求修改条件if (input === null || input === undefined || input.length < 5) {this.message = '密码长度需要大于5'return}if (this.password.length > 0) {if (this.password.toString() === input.toString()) {this.password = input// 保存密码this.savePassword()} else {this.message = '密码与上一次不一致，请重新输入'this.patternLockController.reset()}} else {this.password = inputthis.message = '再次输入手势密码'this.patternLockController.reset()}})Blank().layoutWeight(2)}.width('100%').height('100%')}/*** 保存密码，将手势密码发送到后端保存*/savePassword() {// 最终的字符串密码let defaultPassword:string = this.password.toString()/*** 然后根据实际需要是否对字符串密码进行加密，把密码传到后端服务进行保存即可*/// todo 调取后端接口代码。。。。}
}

3.手势登录页面代码

/*** 手势密码登录页面*/
@Entry
@Component
struct GestureLoginPage {private patternLockController: PatternLockController = new PatternLockController()/*** 提示信息*/@State tips: string = ' '/*** 密码数组*/@State passwordArray: Array<number> = []/*** 字符串密码*/@State password: string = ''aboutToAppear() {}build() {Column() {Blank().layoutWeight(1)// 提示Text(this.tips).fontSize(16).fontColor(Color.Red).margin({ top: 20 })// 手势组件PatternLock(this.patternLockController).sideLength(300).circleRadius(15).pathStrokeWidth(15).autoReset(true).margin({ top: 20, bottom: 50 }).onPatternComplete((input: Array<number>) => {if (input === null || input === undefined || input.length < 5) {this.tips = '密码长度需要大于5'return}this.passwordArray = input/*** 根据实际业务调用登录方法/或接口*/this.doGestureLogin()})Blank().layoutWeight(1)}.width('100%').height('100%').justifyContent(FlexAlign.Start)}/*** 手势登录接口*/doGestureLogin() {this.password = this.passwordArray.toString()// todo 登录方法业务逻辑}
}