HarmonyOS ArkUI实战开发-手势密码（PatternLock）-编程知识

ArkUI开发框架提供了图案密码锁 PatternLock 组件，它以宫格图案的方式输入密码，用于密码验证，本节读者简单介绍一下该控件的使用。

PatternLock定义介绍

interface PatternLockInterface {(controller?: PatternLockController): PatternLockAttribute;
}declare class PatternLockController {constructor();reset();
}

PatternLock 在使用的时候，接收一个 PatternLockController 类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。

简单样例如下所示：

@Entry @Component struct PatternLockTest {build() {Column({space: 10}) {PatternLock(this.patternLockController)}.width('100%').height('100%').padding(10)}
}

PatternLock属性介绍

declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {sideLength(value: Length): PatternLockAttribute;circleRadius(value: Length): PatternLockAttribute;backgroundColor(value: ResourceColor): PatternLockAttribute;regularColor(value: ResourceColor): PatternLockAttribute;selectedColor(value: ResourceColor): PatternLockAttribute;activeColor(value: ResourceColor): PatternLockAttribute;pathColor(value: ResourceColor): PatternLockAttribute;pathStrokeWidth(value: number | string): PatternLockAttribute;onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;autoReset(value: boolean): PatternLockAttribute;
}

sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。
circleRadius：设置宫格圆点的半径，默认值为 14vp 。
regularColor：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。
selectedColor：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。
activeColor：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。
pathColor：设置连线的颜色，默认值为蓝色。
pathStrokeWidth：设置连线的宽度，默认值为 34vp ，最小可以设置为0。
autoReset：设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为 true ，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为 false ，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。

PatternLock属性介绍

declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;
}

onPatternComplete：密码输入结束时被调用的回调函数，input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0 到 8）。

PatternLock完整样例：

@Entry @Component struct PatternLockTest {@State passwords: Number[] = []@State message: string = '请验证密码'private patternLockController: PatternLockController = new PatternLockController()build() {Column({space: 10}) {Text(this.message).textAlign(TextAlign.Center).fontSize(22)PatternLock(this.patternLockController).sideLength(200)            // 设置宽高.circleRadius(7)            // 设置圆点半径.regularColor(Color.Red)    // 设置圆点颜色.pathStrokeWidth(10)        // 设置连线粗细.backgroundColor(Color.Pink)// 设置背景色.autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态.onPatternComplete((input: Array<number>) => {if (input == null || input == undefined || input.length < 5) {this.message = "密码长度至少为5位数。";return;}if (this.passwords.length > 0) {if (this.passwords.toString() == input.toString()) {this.passwords = inputthis.message = "密码设置成功"} else {this.message = '密码输入错误'}} else {this.passwords = inputthis.message = "密码输入错误"}})Button('重置密码').onClick(() => {this.passwords = [];this.message = '请验证手势密码';this.patternLockController.reset();})}.width('100%').height('100%').padding(10)}
}

小结：

文档描述说该组件从 API 8 版本开始提供，但是笔者使用的 API 8（3.1.5.5 和 3.1.6.5）版本并没有该组件，其实 SDK 里边是提供了实现的，只是没有提供相应的 dts 文件，上述样例是笔者根据文档自己添加的 dts 文件，读者如果想在 API 8 版本上使用该组件，也可自行添加 dts 文件。

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05