圖案密碼鎖組件

子組件

無

接口

PatternLock(controller?: PatternLockController)

參數(shù):

屬性

不支持除backgroundColor以外的通用屬性設(shè)置。

事件

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

PatternLockController

PatternLock組件的控制器，可以通過它進(jìn)行組件狀態(tài)重置。

導(dǎo)入對(duì)象

patternLockController: PatternLockController = new PatternLockController()

reset

reset(): void

重置組件狀態(tài)。

示例

// 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)
        .onPatternComplete((input: Array<number>) => {
          // 輸入的密碼長度小于5時(shí)，提示重新輸入
          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) {
            // 判斷兩次輸入的密碼是否相同，相同則提示密碼設(shè)置成功，否則提示重新輸入
            if (this.passwords.toString() === input.toString()) {
              this.passwords = input
              this.message = 'Set password successfully: ' + this.passwords.toString()
            } else {
              this.message = 'Inconsistent passwords, please enter again.'
            }
          } 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%')
  }
}