未验证 提交 e673fdb4 编写于 作者: L luoying_ace 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md.

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 58cd0627
# PatternLock # PatternLock
图案密码锁组件,以宫格图案的方式输入密码,用于密码验证。手指触碰图案密码锁时开始进入输入状态,手指离开屏幕时结束输入状态并向应用返回输入的密码 图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入
> **说明:** > **说明:**
> >
...@@ -18,22 +18,22 @@ PatternLock(controller?: PatternLockController) ...@@ -18,22 +18,22 @@ PatternLock(controller?: PatternLockController)
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | | ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
| controller | [PatternLockController](#patternlockcontroller) | 否 | 给组件绑定一个控制器,用来控制组件状态重置。<br/>默认值:null | | controller | [PatternLockController](#patternlockcontroller) | 否 | 设置PatternLock组件控制器,可用于控制组件状态重置。 |
## 属性 ## 属性
不支持`backgroundColor`以外的通用属性设置。 不支持除backgroundColor以外的通用属性设置。
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| --------------- | ------------------------------------- | ------------------------------------------------------------ | | --------------- | ------------------------------------- | ------------------------------------------------------------ |
| sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度(相同值)。最小可以设置为0<br/>默认值:300vp | | sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度(宽高相同)。设置为0或负数等非法值时组件不显示<br/>默认值:300vp |
| circleRadius | [Length](ts-types.md#length) | 设置宫格圆点的半径。<br/>默认值:14vp | | circleRadius | [Length](ts-types.md#length) | 设置宫格圆点的半径。<br/>默认值:14vp |
| regularColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值:Color.Black | | regularColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值:Color.Black |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值:Color.Black | | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值:Color.Black |
| activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值:Color.Black | | activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色(“激活”状态为手指经过圆点但还未选中的状态)<br/>默认值:Color.Black |
| pathColor | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值:Color.Blue | | pathColor | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值:Color.Blue |
| pathStrokeWidth | number&nbsp;\|&nbsp;string | 设置连线的宽度。最小可以设置为0<br/>默认值:34vp | | pathStrokeWidth | number&nbsp;\|&nbsp;string | 设置连线的宽度。设置为0或负数等非法值时连线不显示<br/>默认值:34vp |
| autoReset | boolean | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。<br/>默认值:true | | autoReset | boolean | 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true,完成密码输入后再次在组件区域按下时会重置组件状态(即清除之前输入的密码);反之若设置为false,则不会重置组件状态。<br/>默认值:true |
## 事件 ## 事件
...@@ -41,11 +41,11 @@ PatternLock(controller?: PatternLockController) ...@@ -41,11 +41,11 @@ PatternLock(controller?: PatternLockController)
| 名称 | 描述 | | 名称 | 描述 |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格的索引(0到8)。 | | onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时触发该回调。<br />input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格圆点的索引值(第一行圆点从左往右依次为0,1,2,第二行圆点依次为3,4,5,第三行圆点依次为6,7,8)。 |
## PatternLockController ## PatternLockController
PatternLock组件的控制器,可以将此对象绑定至PatternLock组件,然后通过它进行状态重置。 PatternLock组件的控制器,可以通过它进行组件状态重置。
### 导入对象 ### 导入对象
...@@ -66,49 +66,51 @@ reset(): void ...@@ -66,49 +66,51 @@ reset(): void
@Entry @Entry
@Component @Component
struct PatternLockExample { struct PatternLockExample {
@State passwords: Number[] = [] @State passwords: Number[] = [];
@State message: string = 'please input password' @State message: string = 'please input password!';
private patternLockController: PatternLockController = new PatternLockController() private patternLockController: PatternLockController = new PatternLockController();
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Column() {
Text(this.message).textAlign(TextAlign.Center) Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
PatternLock(this.patternLockController) PatternLock(this.patternLockController)
.sideLength(150) .sideLength(200)
.circleRadius(7) .circleRadius(9)
.pathStrokeWidth(17) .pathStrokeWidth(18)
.backgroundColor(Color.White) .activeColor('#B0C4DE')
.selectedColor('#228B22')
.pathColor('#90EE90')
.backgroundColor('#F5F5F5')
.autoReset(true) .autoReset(true)
.onPatternComplete((input: Array<number>) => { .onPatternComplete((input: Array<number>) => {
// 判断输出的密码格式 // 输入的密码长度小于5时,提示重新输入
if (input === null || input === undefined || input.length < 5) { if (input === null || input === undefined || input.length < 5) {
this.message = 'The password length needs to be greater than 5.' this.message = 'The password length needs to be greater than 5, please enter again.';
// 重新触发该回调 return;
return
} }
// 判断密码长度是否大于0 // 判断密码长度是否大于0
if (this.passwords.length > 0) { if (this.passwords.length > 0) {
// 判断俩次输入的密码是否相等 // 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入
if (this.passwords.toString() === input.toString()) { if (this.passwords.toString() === input.toString()) {
this.passwords = input this.passwords = input;
this.message = 'Set password successfully: ' + this.passwords.toString() this.message = 'Set password successfully: ' + this.passwords.toString();
} else { } else {
this.message = 'Inconsistent passwords, please enter again.' this.message = 'Inconsistent passwords, please enter again.';
} }
} else { } else {
this.passwords = input // 提示第二次输入密码
this.message = "Please enter again." this.passwords = input;
this.message = "Please enter again.";
} }
}) })
Button('reset button').margin(30).onClick(() => { Button('Reset PatternLock').margin(30).onClick(() => {
this.patternLockController.reset() // 重置密码锁
this.passwords = [] this.patternLockController.reset();
this.message = 'Please input password' this.passwords = [];
this.message = 'Please input password';
}) })
}.width('100%').height('100%') }.width('100%').height('100%')
} }
} }
``` ```
![patternlock](figures/patternlock.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册