深入淺出學(xué)習(xí)eTs之九宮格密碼鎖功能實(shí)現(xiàn)

本項(xiàng)目Gitee倉(cāng)地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、需求分析

相信沒(méi)有人沒(méi)有使用過(guò)九宮格解鎖吧，從智能機(jī)開(kāi)始迸發(fā)的時(shí)期到現(xiàn)在，我們本期就要做一個(gè)自己的密碼鎖

密碼正確可進(jìn)入

提示密碼錯(cuò)誤

可修改密碼

二、控件介紹

PatternLockOpenAtom OpenHarmony

圖案密碼鎖組件，以九宮格圖案的方式輸入密碼，用于密碼驗(yàn)證場(chǎng)景。手指在PatternLock組件區(qū)域按下時(shí)開(kāi)始進(jìn)入輸入狀態(tài)，手指離開(kāi)屏幕時(shí)結(jié)束輸入狀態(tài)完成密碼輸入。

說(shuō)明：

該組件從API Version 9開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

接口

PatternLock(controller?: PatternLockController)

參數(shù):

屬性

不支持除backgroundColor以外的通用屬性設(shè)置。

事件

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

@Entry @Component struct PatternLockTest {

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

三、UI設(shè)計(jì)

(1)放置九宮格

首先放入一個(gè)九宮格，設(shè)置參數(shù)

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

（2）放置按鈕

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

（3）設(shè)置密碼

 @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 = "密碼長(zhǎng)度至少為5位數(shù)。";
            return;
          }
          if (this.passwords.length > 0) {
            if (this.passwords.toString() == input.toString()) {
              this.passwords = input
              this.message = "密碼設(shè)置成功"
            } else {
              this.message = '密碼輸入錯(cuò)誤'
            }
          } else {
            this.passwords = input
            this.message = "密碼輸入錯(cuò)誤"
          }
        })

（4）修改密碼

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

四、效果展示

設(shè)置密碼

密碼錯(cuò)誤

密碼正確

編輯：黃飛