HarmonyOS NEXT Practical: Pattern Password

Objective: Set a pattern password.

PatternLock pattern password lock component, used for password verification scenarios by inputting passwords in a nine grid pattern. When the finger is pressed in the PatternLock component area, it enters the input state, and when the finger leaves the screen, it ends the input state to complete password input.

interface

PatternLock(controller?: PatternLockController)

controller： Set the PatternLock component controller, which can be used to control component state reset. PatternLockController: The controller of the PatternLock component, which can be used to reset the component state.

Component Properties

.sideLength(value: Length) //Set the width and height of the component (with the same width and height). When set to 0 or negative, the component does not display.
.circleRadius(value: Length) //Set the radius of the circular dots in the grid. When set to 0 or negative, take the default value.
.backgroundColor(value: ResourceColor) //Set the background color.
.regularColor(value: ResourceColor) //Set the fill color of the grid dots in the "unselected" state.
.selectedColor(value: ResourceColor) //Set the fill color of the grid dots in the "selected" state.
.activeColor(value: ResourceColor) //Set the fill color of the grid dot in the "activated" state, where the finger passes through the dot but has not yet been selected.

Component Events

.onPatternComplete(callback: (input: Array<number>) => void)//This callback is triggered when the password input is completed.

input：An array of numbers in the same order as the selected grid dots, with the numbers being the index values of the selected grid dots (the first row of dots from left to right are 0, 1, and 2, the second row of dots is 3, 4, and 5, and the third row of dots is 6, 7, and 8).

.onDotConnect(callback: Callback<number>) //When the password is entered and the grid dot is selected, this callback is triggered.

The callback parameter is the number in the order of the selected grid dots, which is the index value of the selected grid dots (the first row of dots from left to right are 0, 1, 2, the second row of dots is 3, 4, 5, and the third row of dots is 6, 7, 8).

Actual combat: PatternLockPage

import { LengthUnit } from '@kit.ArkUI'

@Entry
@Component
struct PatternLockPage {
  @State passwords: Number[] = []
  @State message: string = '请设置图案密码'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column() {
      Text('PatternLock实战练习')
      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(5)
        .activeColor('#707070')
        .selectedColor('#707070')
        .pathColor('#707070')
        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .activateCircleStyle({
          color: '#707070',
          radius: { value: 16, unit: LengthUnit.VP },
          enableWaveEffect: true
        })
        .onDotConnect((index: number) => {
          console.log("onDotConnect index: " + index)
        })
        .onPatternComplete((input: Array<number>) => {
          // 输入的密码长度小于5时，提示重新输入
          if (input.length < 5) {
            this.message = '至少要连接五个点'
            return
          }
          // 判断密码长度是否大于0
          if (this.passwords.length > 0) {
            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
            if (this.passwords.toString() === input.toString()) {
              this.passwords = input
              this.message = '设置密码成功：' + this.passwords.toString()
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
            } else {
              this.message = '两次密码不一致，请重试'
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
            }
          } else {
            // 提示第二次输入密码
            this.passwords = input
            this.message = "请再次设置密码"
          }
        })
      Button('重置密码').margin(30).onClick(() => {
        // 重置密码锁
        this.patternLockController.reset()
        this.passwords = []
        this.message = '请设置密码'
      })
    }.width('100%').height('100%')
  }
}