項目概述
基于鴻蒙（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） - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿動態資訊
