7.3：手势密码（PatternLock）

您所在的位置：网站首页 › ios14设置手势密码 › 7.3：手势密码（PatternLock）

7.3：手势密码（PatternLock）

2024-07-06 23:50| 来源: 网络整理| 查看: 265

# 7.3：手势密码（PatternLock）

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

# 7.3.1：PatternLock定义介绍 interface PatternLockInterface { (controller?: PatternLockController): PatternLockAttribute; } declare class PatternLockController { constructor(); reset(); } 12345678

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

简单样例如下所示：

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

样例运行结果如下图所示：

# 7.3.2：PatternLock属性介绍 declare class PatternLockAttribute extends CommonMethod { 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) => void): PatternLockAttribute; autoReset(value: boolean): PatternLockAttribute; } 123456789101112sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。 circleRadius：设置宫格圆点的半径，默认值为 14vp 。 regularColor：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。 selectedColor：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。 activeColor：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。 pathColor：设置连线的颜色，默认值为蓝色。 pathStrokeWidth：设置连线的宽度，默认值为 34vp ，最小可以设置为0。 autoReset：设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为 true ，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为 false ，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 # 7.3.3：PatternLock属性介绍 declare class PatternLockAttribute extends CommonMethod { onPatternComplete(callback: (input: Array) => void): PatternLockAttribute; } 123onPatternComplete：密码输入结束时被调用的回调函数，input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0 到 8）。 # 7.3.4：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) => { if (input == null || input == undefined || input.length 0) { if (this.passwords.toString() == input.toString()) { this.passwords = input this.message = "密码设置成功" } else { this.message = '密码输入错误' } } else { this.passwords = input this.message = "密码输入错误" } }) Button('重置密码') .onClick(() => { this.passwords = []; this.message = '请验证手势密码'; this.patternLockController.reset(); }) } .width('100%') .height('100%') .padding(10) } } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

样例运行结果如下图所示：

# 7.3.5：小结：

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

(adsbygoogle = window.adsbygoogle || []).push({});

← 7.2：网页加载（Web） 7.4：页面跳转（Router、Ability） →

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心

【本文地址】

7.3：手势密码（PatternLock）

7.3：手势密码（PatternLock）

今日新闻

推荐新闻