1. 组件简介

PatternLock 用于以 3×3 宫格方式输入图案密码，常见于隐私验证场景。ArkUI 提供 PatternLock 组件和 PatternLockController 控制器，能够完成输入、重置等操作。

2. 基础 API

• 创建及控制

  import { PatternLock, PatternLockController } from '@kit.ArkUI';
  
  const ctrl = new PatternLockController();
  PatternLock(ctrl)
    .sideLength(200)
    .autoReset(true)
    .onPatternComplete(input => {
      // input 为数字索引数组，长度 0–8
    });
  

• 主要属性

  • sideLength(n)：整体边长
  • circleRadius(r)：节点半径
  • regularColor(c)、selectedColor(c)、activeColor(c)：节点颜色
  • pathColor(c)、pathStrokeWidth(w)：路径颜色与宽度
  • autoReset(bool)：是否在输入结束后允许再次触摸重置

3. 验证与设置示例

@Component export struct GestureDemo {
  @State var stored: number[] = []
  @State var message: string = '请绘制图案'
  private ctrl = new PatternLockController()

  build() {
    Column({ space: 12 }) {
      Text(this.message).fontSize(18).textAlign(TextAlign.Center)
      PatternLock(this.ctrl)
        .sideLength(220)
        .circleRadius(10)
        .regularColor('#CCCCCC')
        .selectedColor('#317AFF')
        .pathColor('#317AFF')
        .pathStrokeWidth(6)
        .autoReset(true)
        .onPatternComplete(input => {
          if (input.length < 4) {
            this.message = '连接至少 4 个点'
            return
          }
          if (this.stored.length == 0) {
            this.stored = input
            this.message = '请再次绘制以确认'
          } else if (this.stored.toString() === input.toString()) {
            this.message = '设置成功'
          } else {
            this.message = '两次图案不一致'
          }
        })
      Button('重置')
        .onClick(() => {
          this.ctrl.reset()
          this.message = '请绘制图案'
          this.stored = []
        })
    }
    .padding(20)
  }
}

4. 安全与扩展

• 将图案数组通过哈希算法存储，避免明文泄露。
• 限制错误次数，失败超过指定阈值后锁定输入或跳转至生物识别。
• 提供可配置的输入长度上下限及节点数校验。

5. 性能与可访问性

• PatternLock 基于 Canvas 绘制，渲染高效。
• 为视障用户可提供替代模式，如数字输入或指纹验证。
• 根据触控区域建议将 circleRadius 与 sideLength 保持 1:20 左右比例。