ArkUI实战开发-手势密码（PatternLock）

2024-10-08 14:15:06 浏览数 (1)

ArkUI开发框架提供了图案密码锁 PatternLock 组件，它以宫格图案的方式输入密码，用于密码验证，本节读者简单介绍一下该控件的使用。

PatternLock定义介绍

代码语言：ts复制
interface PatternLockInterface {
  (controller?: PatternLockController): PatternLockAttribute;
}

declare class PatternLockController {
  constructor();
  reset();
}

PatternLock 在使用的时候，接收一个 PatternLockController 类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。

简单样例如下所示：

代码语言：ts复制
@Entry @Component struct PatternLockTest {

  build() {
    Column({space: 10}) {
      PatternLock(this.patternLockController)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

PatternLock属性介绍

代码语言：ts复制
declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {
  sideLength(value: Length): PatternLockAttribute;
  circleRadius(value: Length): PatternLockAttribute;
  backgroundColor(value: ResourceColor): PatternLockAttribute;
  regularColor(value: ResourceColor): PatternLockAttribute;
  selectedColor(value: ResourceColor): PatternLockAttribute;
  activeColor(value: ResourceColor): PatternLockAttribute;
  pathColor(value: ResourceColor): PatternLockAttribute;
  pathStrokeWidth(value: number | string): PatternLockAttribute;
  onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;
  autoReset(value: boolean): PatternLockAttribute;
}
  • sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。
  • circleRadius：设置宫格圆点的半径，默认值为 14vp 。
  • regularColor：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。
  • selectedColor：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。
  • activeColor：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。
  • pathColor：设置连线的颜色，默认值为蓝色。
  • pathStrokeWidth：设置连线的宽度，默认值为 34vp ，最小可以设置为0。
  • autoReset：设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为 true ，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为 false ，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。

PatternLock属性介绍

代码语言：ts复制
declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {
  onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;
}
  • onPatternComplete：密码输入结束时被调用的回调函数，input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0 到 8）。

PatternLock完整样例：

代码语言：ts复制
@Entry @Component struct PatternLockTest {

  @State passwords: Number[] = []
  @State message: string = '请验证密码'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column({space: 10}) {
      Text(this.message)
        .textAlign(TextAlign.Center)
        .fontSize(22)

      PatternLock(this.patternLockController)
        .sideLength(200)            // 设置宽高
        .circleRadius(7)            // 设置圆点半径
        .regularColor(Color.Red)    // 设置圆点颜色
        .pathStrokeWidth(10)        // 设置连线粗细
        .backgroundColor(Color.Pink)// 设置背景色
        .autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态
        .onPatternComplete((input: Array<number>) => {
          if (input == null || input == undefined || input.length < 5) {
            this.message = "密码长度至少为5位数。";
            return;
          }
          if (this.passwords.length > 0) {
            if (this.passwords.toString() == input.toString()) {
              this.passwords = input
              this.message = "密码设置成功"
            } else {
              this.message = '密码输入错误'
            }
          } else {
            this.passwords = input
            this.message = "密码输入错误"
          }
        })
      Button('重置密码')
        .onClick(() => {
          this.passwords = [];
          this.message = '请验证手势密码';
          this.patternLockController.reset();
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

小结：

文档描述说该组件从 API 8 版本开始提供，但是笔者使用的 API 8（3.1.5.5 和 3.1.6.5）版本并没有该组件，其实 SDK 里边是提供了实现的，只是没有提供相应的 dts 文件，上述样例是笔者根据文档自己添加的 dts 文件，读者如果想在 API 8 版本上使用该组件，也可自行添加 dts 文件。

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：