项目概述
基于鸿蒙（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
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） - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯