1.效果图
![](https://i-blog.csdnimg.cn/direct/7c967bf6145b4e0685137180af45cae3.png)
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 = input
this.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 登录方法业务逻辑
}
}