前几天给一个 HarmonyOS6 PC 端的日记应用做安全功能产品说要加个应用锁。我一开始想做传统的密码输入框后来一想这都什么年代了PC 端也可以玩点有意思的。试了一下 PatternLock 组件九宫格手势解锁在 PC 大屏上操作起来比手机上还舒服鼠标划过去一气呵成。PC 端用图案锁可能很多人觉得没必要——键盘输入密码不是更快吗但你想想在公共场合使用 PC输入密码容易被旁人偷看而鼠标画个图案就隐蔽多了。而且图案锁的趣味性和直觉性确实比纯密码好不少。PatternLock 组件全解析基础用法PatternLock 组件开箱即用默认就是一个 3x3 的九宫格PatternLock().sideLength(260)sideLength控制整个九宫格区域的边长。PC 端屏幕大设 260-300 比较合适太小了鼠标操作不方便太大了占空间。颜色属性详解PatternLock 提供了四个颜色属性分别控制不同状态的视觉表现PatternLock().sideLength(260).regularColor(#E0E0E0)// 未选中圆点的颜色.selectedColor(#007DFF)// 已选中圆点的颜色.activeColor(#007DFF)// 正在触碰的圆点颜色.pathColor(#007DFF)// 连接路径的颜色regularColor是圆点的默认状态颜色用户还没碰到的那些圆点。建议用浅灰色让用户知道这里有个圆点但还没被选中。selectedColor是用户已经划过、被纳入图案的圆点颜色。这个颜色要够醒目让用户清楚看到自己选了哪些点。activeColor是手指或鼠标正按在上面的那个圆点的颜色。在 PC 端这个状态比较短暂因为鼠标操作一般比触屏快。pathColor是连接各个选中圆点之间的线条颜色。这条线跟着用户的操作实时延伸给用户直观的反馈。这四个颜色可以独立设置做出各种风格。比如一个暗黑主题的应用可以用深色底配亮色路径PatternLock().regularColor(#333333).selectedColor(#00D4AA).activeColor(#00FFCC).pathColor(#00D4AA)图案完成回调onPatternComplete是最核心的回调方法用户完成图案绘制松开鼠标/手指时触发.onPatternComplete((input:number[]){console.log(用户绘制的图案:,input)})回调参数input是一个数字数组每个数字代表九宫格中一个位置的索引。索引从 0 开始从左到右、从上到下排列0 | 1 | 2 --------- 3 | 4 | 5 --------- 6 | 7 | 8用户画了个 Z 字形从左上到右上到中间到左下到右下input 就是[0, 1, 2, 4, 6, 7, 8]。注意经过的每个圆点都会被记录包括中间经过的。图案验证逻辑简单的精确匹配最直接的验证方式就是比较用户输入和预设图案是否完全一致EntryComponentstruct PatternLockDemo{StatelockResult:string请绘制解锁图案StateisSet:booleanfalseprivatesavedPattern:number[][0,1,2,5,8]build(){Column(){Text(PatternLock 图案锁).fontSize(18).fontWeight(FontWeight.Bold).margin({bottom:8})Column(){Text(手势图案解锁).fontSize(14).fontWeight(FontWeight.Medium).margin({bottom:12})Column(){PatternLock().sideLength(260).regularColor(#E0E0E0).selectedColor(#007DFF).activeColor(#007DFF).pathColor(#007DFF).onPatternComplete((input:number[]){constmatchinput.lengththis.savedPattern.lengthinput.every((v,i)vthis.savedPattern[i])if(this.isSet){this.lockResult新图案已设置!this.isSetfalse}elseif(match){this.lockResult解锁成功! 图案正确}else{this.lockResult输入图案:${input.join(-)}(不匹配)}})}.width(100%).alignItems(HorizontalAlign.Center)Text(this.lockResult).fontSize(14).fontColor(#007DFF).fontWeight(FontWeight.Medium).margin({top:12})Text(预设图案: 0-1-2-5-8 (Z字形)).fontSize(11).fontColor(#999999).margin({top:4})Row({space:8}){Button(设置新图案).onClick((){this.isSettruethis.lockResult请绘制新解锁图案})Button(重置).onClick((){this.lockResult请绘制解锁图案this.isSetfalse})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top:12})}.width(100%).backgroundColor(#FFFFFF).borderRadius(12).padding(16)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}这段代码里验证逻辑很简单input.every((v, i) v this.savedPattern[i])逐个比较每个位置是否一致加上长度检查防止遗漏。设置新图案的流程设置新图案需要处理两次确认——用户画一次再画一次确认。这是防止手滑设错了自己也解不开StateisFirstDraw:booleantrueStatefirstPattern:number[][]onPatternComplete((input:number[]){if(this.isSet){if(this.isFirstDraw){this.firstPatterninputthis.isFirstDrawfalsethis.lockResult请再次绘制以确认}else{constmatchinput.lengththis.firstPattern.lengthinput.every((v,i)vthis.firstPattern[i])if(match){this.savedPatternthis.firstPatternthis.lockResult新图案设置成功!this.isSetfalse}else{this.lockResult两次图案不一致请重新设置this.isFirstDrawtrue}}}})图案强度的基本校验不是所有图案都够安全。比如只连了 2 个点的图案太容易被猜中。可以加个最低复杂度要求onPatternComplete((input:number[]){if(input.length4){this.lockResult图案太简单请至少连接4个点return}// 继续验证或设置...})更严格的场景还可以检查是否包含转折点、是否跨越了多行多列等。不过对大多数应用来说限制最小连接数就够了。安全存储图案数据不应该以明文保存在代码里。实际项目中应该把图案哈希后存到安全的存储区域import{hash}fromkit.ArkTS// 存储时哈希savePattern(pattern:number[]){constpatternStrpattern.join(,)consthashedPatternhash.sha256(patternStr)// 存入 Preferences 或安全存储Preferences.put(lock_pattern,hashedPattern)}// 验证时对比哈希值verifyPattern(input:number[]):boolean{constinputHashhash.sha256(input.join(,))constsavedHashPreferences.get(lock_pattern)returninputHashsavedHash}PC 端实战场景应用锁PC 端应用锁是最直接的场景。用户打开应用时先过一道图案锁验证通过才能看到内容。对于日记、财务、健康类应用来说这层保护很有必要。在 HarmonyOS6 PC 上应用锁的入口通常放在路由层。用一个全局状态标记是否已解锁未解锁时只显示 PatternLock 页面StateisUnlocked:booleanfalsebuild(){if(this.isUnlocked){MainContent()}else{PatternLockPage({onUnlock:(){this.isUnlockedtrue}})}}隐私内容保护不是整个应用都需要锁可能只是某些敏感内容。比如笔记应用里有些笔记标记为私密打开这些笔记前需要验证图案。这种局部保护的用户体验比全局锁好得多——不会每次打开应用都要解锁一次。操作确认一些关键操作前用图案锁做二次确认。比如删除账户、清空数据、修改密码这类不可逆操作让用户画一遍图案来确认身份比输入密码更快捷安全性也够用。儿童模式PC 端给小孩用的时候家长可以用图案锁限制某些功能的访问。比如锁住浏览器、锁住系统设置、锁住付费功能。小朋友不知道图案就没法乱点。这个场景下可以做一个简化的四宫格或者加大圆点间距方便鼠标操作。多用户切换PC 经常是多人共用的。每个用户可以设置自己的解锁图案打开应用时选择用户然后画图案解锁直接进入各自的个性化空间。比输入用户名密码的体验好不少特别是对不太擅长打字的用户来说。PC 端特有的交互考量鼠标操作的优化手机上画图案是手指触摸PC 上是鼠标拖拽。两者的操作手感差异很大。鼠标操作更精确但也更容易断线——如果鼠标移动太快可能跳过某些圆点。建议把 PC 端的sideLength适当加大280-320圆点之间的间距大了鼠标操作更从容。同时圆点的视觉反馈要更明显让用户清楚知道鼠标经过时是否成功选中了该圆点。视觉反馈的增强PC 端屏幕大可以在九宫格旁边加一个当前图案预览区域实时显示用户正在画的图案路径。这个小功能在手机端可能没空间做但 PC 端完全放得下对用户体验的提升很明显。无障碍支持对于使用键盘或辅助设备的用户可以提供备用的数字键盘输入方式。按数字键 0-8 对应九宫格的各个位置按回车确认。这样即使不用鼠标也能使用图案锁功能。写在末尾PatternLock 组件在 HarmonyOS6 PC 端是个容易被忽视但很实用的安全组件。九宫格图案解锁不只是手机上的专利在 PC 大屏上配合鼠标操作体验其实更好。从基础用法到图案验证、二次确认、安全存储整个链路并不复杂。应用场景也很广——应用锁、隐私保护、操作确认、儿童模式、多用户切换总有一个和你的项目对得上。如果你的 HarmonyOS6 PC 应用需要一层轻量级的安全保护PatternLock 值得一试。