HarmonyOS开发：PatternLock的使用详解 原创

// 导入组件库
import { PatternLock, PatternLockController } from '@ohos.arkui.ts/components';

// 创建控制器实例
private patternLockCtrl: PatternLockController = new PatternLockController();

1.
2.
3.
4.
5.
6.

PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(5)
        .regularColor('#ff182431') // 未选中的颜色
        .activeColor('#707070') // 激活状态的颜色
        .selectedColor('#707070') // 选中状态的颜色
        .pathColor('#707070') // 连线颜色
        .backgroundColor('#F5F5F5') // 背景色
        .autoReset(true)
        .activateCircleStyle({ // 动态波纹效果
            color: Color.Blue,
            radius: { value: 18, unit: LengthUnit.VP },
            enableWaveEffect: true  // 启用波纹动画
        })
        .onDotConnect((index: number) => {
          console.log("onDotConnect index: " + index)
          this.handlePatternComplete(index) // 具体实现方法在下一部分会介绍
        })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

private handlePatternComplete(input: number[]) {
    if (input.length < 5) {
        this.showToast("至少连接5个点");
        return;
    }
    const encrypted = this.encryptPattern(input); // 加密方法如下面关于密码加密算法所示
    this.validateWithServer(encrypted);
}

1.
2.
3.
4.
5.
6.
7.
8.
9.

private encryptPattern(coordinates: number[]): string {
    const salt = cryptoFramework.createRandom(16);
    const sha256 = cryptoFramework.createHash("SHA256");
    sha256.update({ data: new Int32Array(coordinates) });
    return sha256.digest().then(hash => {
        return salt + hash.toHex();
    });
}
1.
2.
3.
4.
5.
6.
7.
8.

private errorCount: number = 0;

private handleValidationError() {
    this.errorCount++;
    if (this.errorCount >= 3) {
        this.patternLockCtrl.lock(30000); // 锁定30秒
        this.showAlert("账号已锁定");
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

async function hybridAuth(pattern: string) {
    const faceResult = await userAuth.auth(Type.FACE);
    if (faceResult === AuthResult.SUCCESS) {
        return this.quickUnlock(pattern);
    }
    return this.strictValidate(pattern);
}
1.
2.
3.
4.
5.
6.
7.

// 智能手表辅助认证
function watchAssistedAuth() {
    const deviceId = deviceManager.getTrustedDevices()[0];
    distributedLock.begin(deviceId);
    // 同步绘制轨迹...
}
1.
2.
3.
4.
5.
6.

// test.ets
import { LengthUnit } from '@kit.ArkUI'

@Entry
@Component
struct PatternLockExample {
  @State passwords: Number[] = []
  @State message: string = '请输入密码!'
  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(5)
        .activeColor('#707066')
        .selectedColor('#707066')
        .pathColor('#707066')
        .backgroundColor('#F6F6F6')
        .autoReset(true)
        .activateCircleStyle({
          color: '#606060',
          radius: { value: 16, unit: LengthUnit.VP },
          enableWaveEffect: true
        })
        .onDotConnect((index: number) => {

        })
        .onPatternComplete((input: Array<number>) => {
          // 输入的密码长度小于5时，提示重新输入
          if (input.length < 5) {
            this.message = '密码长度需大于5位，请重新输入。'
            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(40).onClick(() => {
        // 重置密码锁
        this.patternLockController.reset()
        this.passwords = []
        this.message = '请输入密码。'
      })
    }.width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.