项目概述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/913133.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/913133.shtml
英文地址,请注明出处:http://en.pswp.cn/news/913133.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue文本插值

好的&#xff0c;我们来详细讲解 Vue 中最基础的数据展示方式&#xff1a;文本插值和在其内部使用的 JavaScript 表达式。 1. 文本插值 (Text Interpolation) 知识点: 文本插值是 Vue 中最基本的数据绑定形式。它使用“Mustache”语法&#xff08;双大括号 {{ }}&#xff09;…

Python:线性代数,向量内积谐音记忆。

目录1 先说结论2 解释3 欢迎纠错4 论文写作/Python 学习智能体------以下关于 Markdown 编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、…

小程序导航设置更多内容的实现方法

在小程序中实现导航栏设置更多内容&#xff0c;可以通过以下几种方式实现&#xff1a; 1. 使用原生导航栏自定义按钮 javascript // app.json 或页面.json中配置 {"navigationBarTitleText": "首页","navigationBarTextStyle": "black&q…

SpringBoot 解决配置文件有黄色波浪线

在application.properties配置文件中有黄色波浪线&#xff0c;是警告!! 原因&#xff1a;编码格式不一致&#xff01;&#xff01; 解决&#xff1a;Settings| Editor | File Encodings | 选择UTF-8

在 Vue 3 中全局使用 Suspense 组件

Suspense 是 Vue 3 引入的一个内置组件&#xff0c;不需要引用可以直接用。用于处理异步依赖的等待状态。虽然 Suspense 主要用于异步组件&#xff0c;但你也可以全局地使用它来管理整个应用的加载状态。 全局 Suspense 的基本用法 1. 在根组件中使用 Suspense // main.js 或…

笔记/计算机网络

Content 计算机网络部分核心概念十大网络协议一览 计算机网络部分核心概念 1. 什么是计算机网络&#xff1f;它最基本的功能是什么&#xff1f; 计算机网络是指通过某种传输介质将多台独立的计算机或设备连接起来&#xff0c;实现数据交换和资源共享的系统。其最基本的功能是数…

时频图数据集更正程序,去除坐标轴白边及调整对应的标签值

当数据集是时频图时可能有一个尴尬的问题&#xff0c;就是数据集制作好后&#xff0c;发现有白边。 其实这也不影响训练模型&#xff0c;可能对模型训练效果的影响也是微乎其微的&#xff0c;于是大多数情况我会选择直接用整张图片训练模型。但是&#xff0c;有的情况下&#x…

mv重命名报错:bash:未预期的符号 ‘(‘附近有语法错误

文章目录 一、报错背景二、解决方法2.1、方法一&#xff1a;文件名加引号2.2、方法二&#xff1a;特殊字符前加\进行转义 一、报错背景 在linux上对一文件执行重命名时报错。原因是该文件名包含空格与括号。 文件名如下&#xff1a; aa &#xff08;1).txt执行命令及报错如下…

Unity-MMORPG内容笔记-其三

继续之前的内容&#xff1a; 战斗系统 无需多言&#xff0c;整个项目中最复杂的部分&#xff0c;也是代码量最大的部分。 属性系统 首先我们要定义一系列属性&#xff0c;毕竟所谓的战斗就是不断地扣血对吧。 属性系统是战斗系统的核心模块&#xff0c;负责管理角色的所有…

Linux入门篇学习——Linux 帮助手册

目录 一、Linux 帮助手册 1.怎么打开帮助手册 2.安装依赖 3.使用手册查看命令 一、Linux 帮助手册 1.怎么打开帮助手册 打开 ubuntu &#xff0c;输入 man 命令打开帮助手册&#xff0c;直接在控制台输入 man 就可以了&#xff0c; man 手册一共有 9 页&#xff0c…

2025年后端主流框架对比和竞争格局及趋势发展

2025年的后端开发呈现出云原生主导、性能革命、AI深度融合的技术格局&#xff0c;主流框架在细分领域持续分化&#xff0c;新兴技术快速渗透关键场景。以下是基于行业实践与技术演进的深度解析&#xff1a; 一、主流框架竞争态势与核心能力 1. Java生态&#xff1a;企业级市场的…

bRPC简介

bRPC基础介绍。 什么是RPC? 互联网上的机器大都通过TCP/IP协议相互访问&#xff0c;但TCP/IP只是往远端发送了一段二进制数据&#xff0c;为了建立服务还有很多问题需要抽象&#xff1a; 数据以什么格式传输&#xff1f;不同机器间&#xff0c;网络间可能是不同的字节序&am…

力扣网C语言编程题:在数组中查找目标值位置之二分查找法

一. 简介 上一篇文章对力扣网上"有序数组中查找目标值范围"题目进行了普通的解法。文章如下&#xff1a; 力扣网C语言编程题&#xff1a;在数组中查找目标值位置之暴力解法-CSDN博客 本文使用二分查找法进行实现&#xff0c;因为二分查找法符合题目要求&#xff0…

前端查询条件加密传输方案(SM2加解密)

一、需求背景 控台项目甲方进行安全测试&#xff0c;测试报告其中一条&#xff1a;敏感信息明文传输 1 敏感信息明文传输 中危 查询接口传输手机号、银行卡号等敏感信息时未加密/脱敏处理。 二、解决方案 讨论出的方案是通过前端查询条件加密&#xff0c;后端对加密的…

【Python】Flask网页

Flask第三方库安装命令&#xff1a;pip install flask代码&#xff1a;from flask import Flask app Flask(__name__)app.route("/") def hello():return "Hello world!"if __name__ "__main__":app.run()其中的"Hello world!"可以改…

数字资产革命中的信任之锚:RWA法律架构的隐形密码

首席数据官高鹏团队律师创作&#xff0c;AI辅助 在数字经济的浪潮中&#xff0c;资产的边界正在被重新定义。当一块地产、一笔应收账款、甚至一份碳配额被转化为链上的数字代币时&#xff0c;技术的光芒固然耀眼&#xff0c;但真正决定其生命力的&#xff0c;是背后隐匿的“信…

mobaxterm终端sqlplus乱码问题解决

背景。使用mobaxterm终端连接linux。在查询数据库表注释时发现**&#xff1f;**中文乱码。影响对表的分析。完成以下三个编码设置再打开sqlplus查询含中文的数据就正常了 总结。需要查看sqlplus的编码是什么 SELECT parameter, value FROM nls_database_parameters WHERE pa…

一个简单的分布式追踪系统

1. 准备工作 导入必要的库 import contextvars import time from typing import Any, Optional, Dict, List, Union from dataclasses import dataclass, field2. 定义上下文变量 # 定义两个上下文变量&#xff0c;存储当前 Span 和 Trace _current_span: contextvars.Conte…

【Qt】事件处理、事件分发器、事件过滤器

事件处理 一. 事件事件处理鼠标事件处理按键事件处理定时器事件处理窗口事件处理 二. 事件分发器三. 事件过滤器 虽然 Qt 是跨平台的 C 开发框架&#xff0c;Qt 的很多能力其实是操作系统提供的&#xff0c;只不过 Qt 封装了系统 API&#xff0c;程序是运行在操作系统上的&…

广东省省考备考(第三十八天7.4)——言语理解:逻辑填空(题目训练)

错题解析 本题可从第二空入手&#xff0c;横线处搭配“理论”&#xff0c;且根据“使得”可知&#xff0c;横线处与前文构成因果关系&#xff0c;即“遗传学的空白和古生物证据的缺乏”导致他的理论在某些方面存在不足&#xff0c;A项“捉襟见肘”指拉一拉衣襟&#xff0c;就露…