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不支持除backgroundColor以外的通用属性设置。 26 27| 名称 | 参数类型 | 描述 | 28| --------------- | ------------------------------------- | ------------------------------------------------------------ | 29| sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度（宽高相同）。设置为0或负数等非法值时组件不显示。<br/>默认值：300vp | 30| circleRadius | [Length](ts-types.md#length) | 设置宫格中圆点的半径。<br/>默认值：14vp | 31| regularColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值：Color.Black | 32| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值：Color.Black | 33| activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。<br/>默认值：Color.Black | 34| pathColor | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值：Color.Blue | 35| pathStrokeWidth | number \| string | 设置连线的宽度。设置为0或负数等非法值时连线不显示。<br/>默认值：34vp | 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 46## PatternLockController 47 48PatternLock组件的控制器，可以通过它进行组件状态重置。 49 50### 导入对象 51 52```typescript 53patternLockController: PatternLockController = new PatternLockController() 54``` 55 56### reset 57 58reset(): void 59 60重置组件状态。 61 62## 示例 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct PatternLockExample { 69 @State passwords: Number[] = [] 70 @State message: string = 'please input password!' 71 private patternLockController: PatternLockController = new PatternLockController() 72 73 build() { 74 Column() { 75 Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20) 76 PatternLock(this.patternLockController) 77 .sideLength(200) 78 .circleRadius(9) 79 .pathStrokeWidth(18) 80 .activeColor('#B0C4DE') 81 .selectedColor('#228B22') 82 .pathColor('#90EE90') 83 .backgroundColor('#F5F5F5') 84 .autoReset(true) 85 .onPatternComplete((input: Array<number>) => { 86 // 输入的密码长度小于5时，提示重新输入 87 if (input === null || input === undefined || input.length < 5) { 88 this.message = 'The password length needs to be greater than 5, please enter again.' 89 return 90 } 91 // 判断密码长度是否大于0 92 if (this.passwords.length > 0) { 93 // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入 94 if (this.passwords.toString() === input.toString()) { 95 this.passwords = input 96 this.message = 'Set password successfully: ' + this.passwords.toString() 97 } else { 98 this.message = 'Inconsistent passwords, please enter again.' 99 } 100 } else { 101 // 提示第二次输入密码 102 this.passwords = input 103 this.message = "Please enter again." 104 } 105 }) 106 Button('Reset PatternLock').margin(30).onClick(() => { 107 // 重置密码锁 108 this.patternLockController.reset() 109 this.passwords = [] 110 this.message = 'Please input password' 111 }) 112 }.width('100%').height('100%') 113 } 114} 115``` 116 117 118
