HarmonyOS NEXT实战：图案密码

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：设置图案密码。

PatternLock图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

接口

代码语言：typescript复制PatternLock(controller?: PatternLockController)controller：设置PatternLock组件控制器，可用于控制组件状态重置。

PatternLockController：PatternLock组件的控制器，可以通过它进行组件状态重置。

组件属性

.sideLength(value: Length) //设置组件的宽度和高度（宽高相同）。设置为0或负数时组件不显示。

.circleRadius(value: Length) //设置宫格中圆点的半径。设置为0或负数时取默认值。

.backgroundColor(value: ResourceColor) //设置背景颜色。

.regularColor(value: ResourceColor) //设置宫格圆点在“未选中”状态的填充颜色。

.selectedColor(value: ResourceColor) //设置宫格圆点在“选中“状态的填充颜色。

.activeColor(value: ResourceColor) //设置宫格圆点在“激活”状态的填充颜色，“激活”状态为手指经过圆点但还未选中的状态。

组件事件

代码语言：typescript复制.onPatternComplete(callback: (input: Array) => void)//密码输入结束时触发该回调。input：与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

代码语言：typescript复制.onDotConnect(callback: Callback) //密码输入选中宫格圆点时触发该回调。回调参数为选中宫格圆点顺序的数字，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

实战代码

代码语言：typescript复制import { LengthUnit } from '@kit.ArkUI'

@Entry

@Component

struct PatternLockPage {

@State passwords: Number[] = []

@State message: string = '请设置图案密码'

private patternLockController: PatternLockController = new PatternLockController()

build() {

Column() {

Text('PatternLock实战练习')

Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)

PatternLock(this.patternLockController)

.sideLength(200)

.circleRadius(9)

.pathStrokeWidth(5)

.activeColor('#707070')

.selectedColor('#707070')

.pathColor('#707070')

.backgroundColor('#F5F5F5')

.autoReset(true)

.activateCircleStyle({

color: '#707070',

radius: { value: 16, unit: LengthUnit.VP },

enableWaveEffect: true

})

.onDotConnect((index: number) => {

console.log("onDotConnect index: " + index)

})

.onPatternComplete((input: Array) => {

// 输入的密码长度小于5时，提示重新输入

if (input.length < 5) {

this.message = '至少要连接五个点'

return

}

// 判断密码长度是否大于0

if (this.passwords.length > 0) {

// 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入

if (this.passwords.toString() === input.toString()) {

this.passwords = input

this.message = '设置密码成功：' + this.passwords.toString()

this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)

} else {

this.message = '两次密码不一致，请重试'

this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)

}

} else {

// 提示第二次输入密码

this.passwords = input

this.message = "请再次设置密码"

}

})

Button('重置密码').margin(30).onClick(() => {

// 重置密码锁

this.patternLockController.reset()

this.passwords = []

this.message = '请设置密码'

})

}.width('100%').height('100%')

}

}