前几天给一个 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]。注意，经过的每个圆点都会被记录，包括中间经过的。
图案验证逻辑
简单的精确匹配
最直接的验证方式就是比较用户输入和预设图案是否完全一致：
@Entry@Componentstruct PatternLockDemo{@StatelockResult:string='请绘制解锁图案'@StateisSet:boolean=falseprivatesavedPattern: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[])=>{constmatch=input.length===this.savedPattern.length&&input.every((v,i)=>v===this.savedPattern[i])if(this.isSet){this.lockResult='新图案已设置!'this.isSet=false}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.isSet=truethis.lockResult='请绘制新解锁图案'})Button('重置').onClick(()=>{this.lockResult='请绘制解锁图案'this.isSet=false})}.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:boolean=true@StatefirstPattern:number[]=[]onPatternComplete((input:number[])=>{if(this.isSet){if(this.isFirstDraw){this.firstPattern=inputthis.isFirstDraw=falsethis.lockResult='请再次绘制以确认'}else{constmatch=input.length===this.firstPattern.length&&input.every((v,i)=>v===this.firstPattern[i])if(match){this.savedPattern=this.firstPatternthis.lockResult='新图案设置成功!'this.isSet=false}else{this.lockResult='两次图案不一致，请重新设置'this.isFirstDraw=true}}}})图案强度的基本校验
不是所有图案都够安全。比如只连了 2 个点的图案太容易被猜中。可以加个最低复杂度要求：
onPatternComplete((input:number[])=>{if(input.length<4){this.lockResult='图案太简单，请至少连接4个点'return}// 继续验证或设置...})更严格的场景还可以检查是否包含转折点、是否跨越了多行多列等。不过对大多数应用来说，限制最小连接数就够了。
安全存储
图案数据不应该以明文保存在代码里。实际项目中应该把图案哈希后存到安全的存储区域：
import{hash}from'@kit.ArkTS'// 存储时哈希savePattern(pattern:number[]){constpatternStr=pattern.join(',')consthashedPattern=hash.sha256(patternStr)// 存入 Preferences 或安全存储Preferences.put('lock_pattern',hashedPattern)}// 验证时对比哈希值verifyPattern(input:number[]):boolean{constinputHash=hash.sha256(input.join(','))constsavedHash=Preferences.get('lock_pattern')returninputHash===savedHash}PC 端实战场景
应用锁
PC 端应用锁是最直接的场景。用户打开应用时先过一道图案锁，验证通过才能看到内容。对于日记、财务、健康类应用来说，这层保护很有必要。
在 HarmonyOS6 PC 上，应用锁的入口通常放在路由层。用一个全局状态标记是否已解锁，未解锁时只显示 PatternLock 页面：
@StateisUnlocked:boolean=falsebuild(){if(this.isUnlocked){MainContent()}else{PatternLockPage({onUnlock:()=>{this.isUnlocked=true}})}}隐私内容保护
不是整个应用都需要锁，可能只是某些敏感内容。比如笔记应用里有些笔记标记为"私密"，打开这些笔记前需要验证图案。这种局部保护的用户体验比全局锁好得多——不会每次打开应用都要解锁一次。
操作确认
一些关键操作前用图案锁做二次确认。比如删除账户、清空数据、修改密码这类不可逆操作，让用户画一遍图案来确认身份，比输入密码更快捷，安全性也够用。
儿童模式
PC 端给小孩用的时候，家长可以用图案锁限制某些功能的访问。比如锁住浏览器、锁住系统设置、锁住付费功能。小朋友不知道图案就没法乱点。
这个场景下可以做一个简化的四宫格或者加大圆点间距，方便鼠标操作。
多用户切换
PC 经常是多人共用的。每个用户可以设置自己的解锁图案，打开应用时选择用户然后画图案解锁，直接进入各自的个性化空间。比输入用户名密码的体验好不少，特别是对不太擅长打字的用户来说。
PC 端特有的交互考量
鼠标操作的优化
手机上画图案是手指触摸，PC 上是鼠标拖拽。两者的操作手感差异很大。鼠标操作更精确但也更容易"断线"——如果鼠标移动太快，可能跳过某些圆点。
建议把 PC 端的sideLength适当加大（280-320），圆点之间的间距大了，鼠标操作更从容。同时圆点的视觉反馈要更明显，让用户清楚知道鼠标经过时是否成功选中了该圆点。
视觉反馈的增强
PC 端屏幕大，可以在九宫格旁边加一个"当前图案预览"区域，实时显示用户正在画的图案路径。这个小功能在手机端可能没空间做，但 PC 端完全放得下，对用户体验的提升很明显。
无障碍支持
对于使用键盘或辅助设备的用户，可以提供备用的数字键盘输入方式。按数字键 0-8 对应九宫格的各个位置，按回车确认。这样即使不用鼠标也能使用图案锁功能。
写在末尾
PatternLock 组件在 HarmonyOS6 PC 端是个容易被忽视但很实用的安全组件。九宫格图案解锁不只是手机上的专利，在 PC 大屏上配合鼠标操作，体验其实更好。
从基础用法到图案验证、二次确认、安全存储，整个链路并不复杂。应用场景也很广——应用锁、隐私保护、操作确认、儿童模式、多用户切换，总有一个和你的项目对得上。如果你的 HarmonyOS6 PC 应用需要一层轻量级的安全保护，PatternLock 值得一试。
