图案密码锁组件

2024-01-22 17:22 更新

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

说明

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

PatternLock(controller?: PatternLockController)

参数:

参数名参数类型必填描述
controllerPatternLockController设置PatternLock组件控制器,可用于控制组件状态重置。

属性

不支持除backgroundColor以外的通用属性设置。

名称参数类型描述
sideLengthLength

设置组件的宽度和高度(宽高相同)。设置为0或负数等非法值时组件不显示。

默认值:300vp

circleRadiusLength

设置宫格中圆点的半径。

默认值:14vp

regularColorResourceColor

设置宫格圆点在“未选中”状态的填充颜色。

默认值:Color.Black

selectedColorResourceColor

设置宫格圆点在“选中”状态的填充颜色。

默认值:Color.Black

activeColorResourceColor

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

默认值:Color.Black

pathColorResourceColor

设置连线的颜色。

默认值:Color.Blue

pathStrokeWidthnumber | string

设置连线的宽度。设置为0或负数等非法值时连线不显示。

默认值:34vp

autoResetboolean

设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true,完成密码输入后再次在组件区域按下时会重置组件状态(即清除之前输入的密码);反之若设置为false,则不会重置组件状态。

默认值:true

事件

除支持通用事件外,还支持以下事件:

名称描述
onPatternComplete(callback: (input: Array<number>) => void)

密码输入结束时触发该回调。

input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格圆点的索引值(第一行圆点从左往右依次为0,1,2,第二行圆点依次为3,4,5,第三行圆点依次为6,7,8)。

PatternLockController

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

导入对象

  1. patternLockController: PatternLockController = new PatternLockController()

reset

reset(): void

重置组件状态。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PatternLockExample {
  5. @State passwords: Number[] = []
  6. @State message: string = 'please input password!'
  7. private patternLockController: PatternLockController = new PatternLockController()
  8. build() {
  9. Column() {
  10. Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
  11. PatternLock(this.patternLockController)
  12. .sideLength(200)
  13. .circleRadius(9)
  14. .pathStrokeWidth(18)
  15. .activeColor('#B0C4DE')
  16. .selectedColor('#228B22')
  17. .pathColor('#90EE90')
  18. .backgroundColor('#F5F5F5')
  19. .autoReset(true)
  20. .onPatternComplete((input: Array<number>) => {
  21. // 输入的密码长度小于5时,提示重新输入
  22. if (input === null || input === undefined || input.length < 5) {
  23. this.message = 'The password length needs to be greater than 5, please enter again.'
  24. return
  25. }
  26. // 判断密码长度是否大于0
  27. if (this.passwords.length > 0) {
  28. // 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入
  29. if (this.passwords.toString() === input.toString()) {
  30. this.passwords = input
  31. this.message = 'Set password successfully: ' + this.passwords.toString()
  32. } else {
  33. this.message = 'Inconsistent passwords, please enter again.'
  34. }
  35. } else {
  36. // 提示第二次输入密码
  37. this.passwords = input
  38. this.message = "Please enter again."
  39. }
  40. })
  41. Button('Reset PatternLock').margin(30).onClick(() => {
  42. // 重置密码锁
  43. this.patternLockController.reset()
  44. this.passwords = []
  45. this.message = 'Please input password'
  46. })
  47. }.width('100%').height('100%')
  48. }
  49. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号