1# PatternLock 2 3图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。 4 5> **说明：** 6> 7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15PatternLock(controller?: PatternLockController) 16 17**参数:** 18 19| 参数名 | 参数类型 | 必填 | 描述 | 20| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 21| controller | [PatternLockController](#patternlockcontroller) | 否 | 设置PatternLock组件控制器，可用于控制组件状态重置。 | 22 23## 属性 24 25除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 26 27| 名称 | 参数类型 | 描述 | 28| --------------- | ------------------------------------- | ------------------------------------------------------------ | 29| sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度（宽高相同）。设置为0或负数时组件不显示。<br/>默认值：288vp | 30| circleRadius | [Length](ts-types.md#length) | 设置宫格中圆点的半径。设置为0或负数时取默认值。<br/>默认值：6vp | 31| regularColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值：'#ff182431' | 32| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值：'#ff182431' | 33| activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。<br/>默认值：'#ff182431' | 34| pathColor | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值：'#33182431' | 35| pathStrokeWidth | number \| string | 设置连线的宽度。设置为0或负数时连线不显示。<br/>默认值：12vp | 36| autoReset | boolean | 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；反之若设置为false，则不会重置组件状态。<br/>默认值：true | 37 38## 事件 39 40除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 41 42| 名称 | 描述 | 43| ------------------------------------------------------------ | ------------------------------------------------------------ | 44| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时触发该回调。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。 | 45| onDotConnect(callback: [CallBack](../../apis-basic-services-kit/js-apis-base.md#callback)\<number\>)<sup>11+</sup> | 密码输入选中宫格圆点时触发该回调。<br />**说明：**<br />回调参数为选中宫格圆点顺序的数字，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。 | 46 47## PatternLockController 48 49PatternLock组件的控制器，可以通过它进行组件状态重置。 50 51### 导入对象 52 53```typescript 54let patternLockController: PatternLockController = new PatternLockController() 55``` 56 57### reset 58 59reset(): void 60 61重置组件状态。 62 63### setChallengeResult<sup>11+</sup> 64 65setChallengeResult(result: PatternLockChallengeResult): void 66 67用于设置图案密码正确或错误状态。 68 69| 参数 | 参数类型 | 必填 | 参数描述 | 70| ------ | ------------------------------------------------------------ | ---- | -------------- | 71| result | [PatternLockChallengeResult](#patternlockchallengeresult11枚举说明) | 是 | 图案密码状态。 | 72 73## PatternLockChallengeResult<sup>11+</sup>枚举说明 74 75| 名称 | 描述 | 76| ------- | -------------- | 77| CORRECT | 图案密码正确。 | 78| WRONG | 图案密码错误。 | 79 80## 示例 81 82```ts 83// xxx.ets 84@Entry 85@Component 86struct PatternLockExample { 87 @State passwords: Number[] = [] 88 @State message: string = 'please input password!' 89 private patternLockController: PatternLockController = new PatternLockController() 90 91 build() { 92 Column() { 93 Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20) 94 PatternLock(this.patternLockController) 95 .sideLength(200) 96 .circleRadius(9) 97 .pathStrokeWidth(18) 98 .activeColor('#B0C4DE') 99 .selectedColor('#228B22') 100 .pathColor('#90EE90') 101 .backgroundColor('#F5F5F5') 102 .autoReset(true) 103 .onDotConnect((index: number) => { 104 console.log("onDotConnect index: " + index) 105 }) 106 .onPatternComplete((input: Array<number>) => { 107 // 输入的密码长度小于5时，提示重新输入 108 if (input === null || input === undefined || input.length < 5) { 109 this.message = 'The password length needs to be greater than 5, please enter again.' 110 return 111 } 112 // 判断密码长度是否大于0 113 if (this.passwords.length > 0) { 114 // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入 115 if (this.passwords.toString() === input.toString()) { 116 this.passwords = input 117 this.message = 'Set password successfully: ' + this.passwords.toString() 118 this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT) 119 } else { 120 this.message = 'Inconsistent passwords, please enter again.' 121 this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG) 122 } 123 } else { 124 // 提示第二次输入密码 125 this.passwords = input 126 this.message = "Please enter again." 127 } 128 }) 129 Button('Reset PatternLock').margin(30).onClick(() => { 130 // 重置密码锁 131 this.patternLockController.reset() 132 this.passwords = [] 133 this.message = 'Please input password' 134 }) 135 }.width('100%').height('100%') 136 } 137} 138``` 139 140 141
