深入淺出學習eTs之九宮格密碼鎖功能實現

本項目Gitee倉地址：深入淺出eTs學習: 帶大家深入淺出學習eTs (gitee.com)

一、需求分析

相信沒有人沒有使用過九宮格解鎖吧，從智能機開始迸發的時期到現在，我們本期就要做一個自己的密碼鎖

密碼正確可進入

提示密碼錯誤

可修改密碼

二、控件介紹

PatternLockOpenAtom OpenHarmony

圖案密碼鎖組件，以九宮格圖案的方式輸入密碼，用于密碼驗證場景。手指在PatternLock組件區域按下時開始進入輸入狀態，手指離開屏幕時結束輸入狀態完成密碼輸入。

說明：

該組件從API Version 9開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

接口

PatternLock(controller?: PatternLockController)

參數:

屬性

不支持除backgroundColor以外的通用屬性設置。

事件

除支持通用事件外，還支持以下事件：

@Entry @Component struct PatternLockTest {

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

三、UI設計

(1)放置九宮格

首先放入一個九宮格，設置參數

      PatternLock(this.patternLockController)
        .sideLength(350)            // 設置寬高
        .circleRadius(15)            // 設置圓點半徑
        .regularColor(Color.Blue)    // 設置圓點顏色
        .pathStrokeWidth(30)        // 設置連線粗細
        .backgroundColor('rgba(209, 219, 229, 0.95)')
        .autoReset(true)            // 支持用戶在完成輸入后再次觸屏重置組件狀態
        .border({radius:30})
        .onPatternComplete((input: Array) => {
        })

（2）放置按鈕

            Button('清除')
              .width(200)
              .fontSize(20)
              .onClick(() => {
                this.patternLockController.reset();
              })

（3）設置密碼

 @State passwords: Number[] = []

      Text(this.passwords.toString())
        .textAlign(TextAlign.Center)
        .fontSize(22)

        .onPatternComplete((input: Array) => {
          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 = "密碼輸入錯誤"
          }
        })

（4）修改密碼

      Button('重置密碼')
        .width(200)
        .fontSize(20)
        .onClick(() => {
          set_flag = 1;
          this.passwords = [];
          this.message = '請輸入新的密碼';
          this.patternLockController.reset();
        })

四、效果展示

設置密碼

密碼錯誤

密碼正確

編輯：黃飛