PatternLock

圖案密碼鎖組件，以九宮格圖案的方式輸入密碼，用于密碼驗證場景。手指在PatternLock組件區域按下時開始進入輸入狀態，手指離開屏幕時結束輸入狀態完成密碼輸入。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 9開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

無

接口

PatternLock(controller?: PatternLockController)

參數:

參數名	參數類型	必填	描述
controller	[PatternLockController]	否	設置PatternLock組件控制器，可用于控制組件狀態重置。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
sideLength	[Length]	設置組件的寬度和高度（寬高相同）。設置為0或負數時組件不顯示。默認值：288vp
circleRadius	[Length]	設置宮格中圓點的半徑。設置為0或負數時取默認值。默認值：6vp
regularColor	[ResourceColor]	設置宮格圓點在“未選中”狀態的填充顏色。默認值：'#ff182431'
selectedColor	[ResourceColor]	設置宮格圓點在“選中”狀態的填充顏色。默認值：'#ff182431'
ac tiveColor	[ResourceColor]	設置宮格圓點在“激活”狀態的填充顏色（“激活”狀態為手指經過圓點但還未選中的狀態）。默認值：'#ff182431'
pathColor	[ResourceColor]	設置連線的顏色。默認值：'#33182431'
pathStrokeWidth	number	string
autoReset	boolean	設置在完成密碼輸入后再次在組件區域按下時是否重置組件狀態。設置為true，完成密碼輸入后再次在組件區域按下時會重置組件狀態（即清除之前輸入的密碼）；反之若設置為false，則不會重置組件狀態。默認值：true

事件

除支持[通用事件]外，還支持以下事件：

名稱	描述
onPatternComplete(callback: (input: Array) => void)	密碼輸入結束時觸發該回調。 input: 與選中宮格圓點順序一致的數字數組，數字為選中宮格圓點的索引值（第一行圓點從左往右依次為0、1、2，第二行圓點依次為3、4、5，第三行圓點依次為6、7、8）。
onDotConnect(callback: Callback)11+	密碼輸入選中宮格圓點時觸發該回調。說明：回調參數為選中宮格圓點順序的數字，數字為選中宮格圓點的索引值（第一行圓點從左往右依次為0、1、2，第二行圓點依次為3、4、5，第三行圓點依次為6、7、8）。

PatternLockController

PatternLock組件的控制器，可以通過它進行組件狀態重置。

導入對象

let patternLockController: PatternLockController = new PatternLockController()

reset

reset(): void

重置組件狀態。

setChallengeResult11+

setChallengeResult(result: PatternLockChallengeResult): void

用于設置圖案密碼正確或錯誤狀態。

參數	參數類型	必填	參數描述
result	[PatternLockChallengeResult]	是	圖案密碼狀態。

PatternLockChallengeResult11+枚舉說明

名稱	描述
CORRECT	圖案密碼正確。
WRONG	圖案密碼錯誤。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

示例

// xxx.ets
@Entry
@Component
struct PatternLockExample {
  @State passwords: Number[] = []
  @State message: string = 'please input password!'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column() {
      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(18)
        .activeColor('#B0C4DE')
        .selectedColor('#228B22')
        .pathColor('#90EE90')
        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .onDotConnect((index: number) = > {
          console.log("onDotConnect index: " + index)
        })
        .onPatternComplete((input: Array< number >) = > {
          // 輸入的密碼長度小于5時，提示重新輸入
          if (input === null || input === undefined || input.length < 5) {
            this.message = 'The password length needs to be greater than 5, please enter again.'
            return
          }
          // 判斷密碼長度是否大于0
          if (this.passwords.length > 0) {
            // 判斷兩次輸入的密碼是否相同，相同則提示密碼設置成功，否則提示重新輸入
            if (this.passwords.toString() === input.toString()) {
              this.passwords = input
              this.message = 'Set password successfully: ' + this.passwords.toString()
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
            } else {
              this.message = 'Inconsistent passwords, please enter again.'
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
            }
          } else {
            // 提示第二次輸入密碼
            this.passwords = input
            this.message = "Please enter again."
          }
        })
      Button('Reset PatternLock').margin(30).onClick(() = > {
        // 重置密碼鎖
        this.patternLockController.reset()
        this.passwords = []
        this.message = 'Please input password'
      })
    }.width('100%').height('100%')
  }
}