鸿蒙中 手势解锁 PatternLock组件

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

鸿蒙（HarmonyOS）提供了PatternLock组件，用于实现九宫格图案密码锁功能。以下是该组件的核心特性和使用说明：

一、PatternLock组件概述

1. 功能描述 PatternLock允许用户通过连接九宫格圆点输入密码，适用于身份验证场景。用户手指按下时开始输入，离开屏幕时完成密码输入并触发回调。

2. 支持版本 该组件从API Version 9开始支持，后续版本持续增强功能。

二、核心属性与配置

示例配置：

PatternLock()
  .sideLength(200)
  .circleRadius(9)
  .selectedColor('#228B22')
  .pathColor('#90EE90')
  .autoReset(true)

三、事件与控制器

1. 关键事件

   • onPatternComplete：密码输入完成时触发，返回选中圆点的索引数组（0-8） 
   • onDotConnect（API 11+）：单个圆点被连接时触发 

2. 控制器（PatternLockController）

   • reset()：重置组件状态 
   • setChallengeResult()：设置密码验证结果（API 11+） 

示例代码：

private controller: PatternLockController = new PatternLockController();

PatternLock(this.controller)
  .onPatternComplete((input: number[]) => {
    if (input.length < 5) {
      console.error('密码需至少5个点');
      this.controller.reset(); // 验证失败时重置
    }
  })

四、完整使用案例

以下实现密码设置与验证流程：

@Entry
@Component
struct PatternLockExample {
  @State passwords: number[] = [];
  @State message: string = '请设置密码';
  private controller: PatternLockController = new PatternLockController();

  build() {
    Column() {
      Text(this.message).fontSize(20)
      PatternLock(this.controller)
        .onPatternComplete((input) => {
          if (this.passwords.length === 0) {
            this.passwords = input;
            this.message = '请再次输入密码';
          } else if (this.passwords.toString() === input.toString()) {
            this.message = '密码设置成功';
          } else {
            this.message = '两次输入不一致';
            this.controller.reset();
          }
        })
      Button('重置').onClick(() => this.controller.reset())
    }
  }
}

五、进阶功能

1. 与用户首选项结合 使用@ohos.data.preferences持久化存储密码，实现应用重启后验证。

2. 动态样式 API 12+支持activateCircleStyle，可配置激活状态的圆环动画。

3. 多端适配 通过响应式布局调整sideLength，适配不同屏幕尺寸。

4. 设计建议：密码长度建议不少于5个连接点以提高安全性。