鸿蒙系统（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 = trueprivate 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） - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯