鸿蒙系统(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)
    }
  }
}

鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock) - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯

相关推荐
前端开发与ui设计的老司机1 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css