鸿蒙系统（HarmonyOS）应用开发之手势锁屏密码锁（PatternLock）

项目概述

基于鸿蒙（OpenHarmony）平台开发的手势密码锁应用，旨在为用户提供安全、便捷且具有良好交互体验的身份验证方式。通过手势图案输入，用户可以轻松设置和验证密码，提升设备的安全性和个性化体验。

功能特点

• 手势密码设置与验证：支持用户自定义手势密码，输入手势后进行验证，保障账户安全。
• 动态提示与反馈：输入正确或错误时，界面会以不同颜色和动画进行反馈，并通过 Toast 提示用户操作结果。
• 密码重置：一键重置手势密码，便于用户随时更换密码。
• 美观的 UI 设计：采用半透明背景、圆形头像、阴影等现代化设计元素，提升视觉体验。
• 动画与震动反馈：操作过程中配合动画效果，增强交互感。

技术架构

• 开发平台：OpenHarmony（鸿蒙）
• 主要语言：ETS（ArkTS）
• 核心组件：
• PatternLock 手势密码输入组件
• promptAction 用于 Toast 消息提示
• vibrator 用于震动反馈（可选）
• 状态管理：基于@State 实现页面响应式数据绑定
• UI 布局：采用 Stack、Column 等布局组件，适配多种屏幕尺寸

使用场景

• 设备解锁：可作为手机、平板等智能设备的解锁方式，提升安全性。
• 应用内二次验证：适用于金融、隐私类 App 的二次身份验证。
• 儿童/家庭模式：为特定应用场景（如儿童锁、家长控制）提供便捷的手势解锁方案。
• 智能家居：可集成到智能门锁、家居控制面板等 IoT 设备中，实现手势开锁。

完整源码

import promptAction from '@ohos.promptAction';
import vibrator from '@ohos.vibrator';

@Entry
@Component
struct PatternLockTest {
  @State passwords: Number[] = [1, 3, 4, 5, 7]
  @State message: string = '请验证密码'
  @State messageColor: Color = Color.White
  @State isSuccess: boolean = false
  @State isError: boolean = false
  @State showPattern: boolean = true
  private patternLockController: PatternLockController = new PatternLockController()

  aboutToAppear() {
    // 初始化时确保状态正确
    this.isSuccess = false;
    this.isError = false;
  }

  // 显示状态消息并设置颜色
  showMessage(msg: string, isError: boolean = false, isSuccess: boolean = false) {
    this.message = msg;
    this.isError = isError;
    this.isSuccess = isSuccess;

    if (isError) {
      this.messageColor = Color.Red;
      // 错误时显示提示
      promptAction.showToast({
        message: msg,
        duration: 2000,
        bottom: '70%'
      });
    } else if (isSuccess) {
      this.messageColor = Color.Green; // 成功绿色
      // 成功时显示提示
      promptAction.showToast({
        message: msg,
        duration: 2000,
        bottom: '70%'
      });
    } else {
      this.messageColor = Color.White;
    }
  }

  build() {
    Stack() {
      // 背景图
      Image($r('app.media.background'))
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Cover)
        .opacity(0.85)

      Column({ space: 20 }) {
        // 顶部标题区域
        Column({ space: 8 }) {
          Image($r('app.media.avatar'))
            .width(80)
            .height(80)
            .borderRadius(40)
            .border({ width: 2, color: Color.White })
            .shadow({
              radius: 10,
              color: 'rgba(0,0,0,0.3)',
              offsetX: 0,
              offsetY: 2
            })
            .animation({
              duration: 500,
              curve: Curve.EaseOut
            })
            .margin({ top: 50, bottom: 20 })

          Text('手势密码')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.White)
            .opacity(0.9)
            .shadow({
              radius: 2,
              color: 'rgba(0,0,0,0.3)',
              offsetX: 0,
              offsetY: 1
            })

          Text(this.message)
            .textAlign(TextAlign.Center)
            .fontSize(18)
            .fontColor(this.messageColor)
            .fontWeight(this.isError || this.isSuccess ? FontWeight.Bold : FontWeight.Normal)
            .opacity(0.9)
            .animation({
              duration: 300,
              curve: Curve.EaseInOut
            })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Center)

        // 手势密码区域
        if (this.showPattern) {
          Column() {
            PatternLock(this.patternLockController)
              .sideLength(300)            // 设置宽高
              .circleRadius(10)           // 设置圆点半径
              .regularColor(Color.Gray)    // 设置圆点颜色
              .activeColor(Color.Blue)     // 设置激活状态的颜色
              .selectedColor(this.isError ? Color.Red : (this.isSuccess ? Color.Green : Color.Blue)) // 根据状态设置颜色
              .pathColor(this.isError ? Color.Red : (this.isSuccess ? Color.Green : Color.Blue))     // 根据状态设置路径颜色
              .pathStrokeWidth(8)         // 设置连线粗细
              .backgroundColor('rgba(255, 255, 255, 0.15)') // 半透明背景
              .autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态
              .onPatternComplete((input: Array<number>) => {
                console.log(input.join(','));

                if (input == null || input == undefined || input.length < 5) {
                  this.showMessage("密码长度至少为5位数。", true);
                  return;
                }

                if (this.passwords.length > 0) {
                  if (this.passwords.toString() == input.toString()) {
                    this.passwords = input;
                    this.showMessage("密码验证成功", false, true);

                    // 成功动画效果
                    this.showPattern = false;
                    setTimeout(() => {
                      this.showPattern = true;
                      this.isSuccess = false;
                    }, 100);
                  } else {
                    this.showMessage('密码输入错误', true);
                  }
                } else {
                  this.passwords = input;
                  this.showMessage("密码设置成功", false, true);
                }
              })
              .shadow({
                radius: 15,
                color: 'rgba(0,0,0,0.2)',
                offsetX: 0,
                offsetY: 5
              })
              .animation({
                duration: 500,
                curve: Curve.EaseOut
              })
          }
        }

        // 底部按钮区域
        Button('重置密码')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .height(50)
          .width(200)
          .borderRadius(25)
          .backgroundColor('rgba(255, 255, 255, 0.2)')
          .fontColor(Color.White)
          .shadow({
            radius: 8,
            color: 'rgba(0,0,0,0.2)',
            offsetX: 0,
            offsetY: 4
          })
          .onClick(() => {
            this.passwords = [];
            this.showMessage('请设置新的手势密码');
            this.patternLockController.reset();
          })
          .stateEffect(true)
          .margin({ top: 30 })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .alignItems(HorizontalAlign.Center)
    }
  }
}