提交 d144ff29 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cfd39193
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md) - [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md) - [Navigation](ts-basic-components-navigation.md)
- [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md) - [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md) - [QRCode](ts-basic-components-qrcode.md)
...@@ -98,7 +97,6 @@ ...@@ -98,7 +97,6 @@
- [List](ts-container-list.md) - [List](ts-container-list.md)
- [ListItem](ts-container-listitem.md) - [ListItem](ts-container-listitem.md)
- [Navigator](ts-container-navigator.md) - [Navigator](ts-container-navigator.md)
-
- [Panel](ts-container-panel.md) - [Panel](ts-container-panel.md)
- [Refresh](ts-container-refresh.md) - [Refresh](ts-container-refresh.md)
- [Row](ts-container-row.md) - [Row](ts-container-row.md)
......
# PatternLock
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<PatternLock>** component allows users to use a pattern password for authentication. It enters the input state once being touched, and exits the input state and sends the entered password to the application once the finger leaves the screen.
## Required Permissions
None
## Child Components
None
## APIs
PatternLock(controller?: PatternLockController)
- Parameters
| Name | Type | Mandatory| Default Value| Description |
| ---------- | ----------------------------------------------- | ---- | ------ | -------------------------------------------- |
| controller | [PatternLockController](#patternlockcontroller) | No | null | Controller of a component to reset the component status.|
## Attributes
Except for **backgroundColor**, universal attributes are not supported.
| Name | Type | Default Value | Description |
| --------------- | --------------------------------------------------- | ----------- | ------------------------------------------------------------ |
| sideLength | Length | 300vp | Width and height (same value) of the component. The minimum value is **0**. |
| circleRadius | Length | 14vp | Radius of a grid dot. |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in unselected state. |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in selected state. |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in active state. |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | Path color. |
| pathStrokeWidth | Length | 34vp | Width of the path stroke. The minimum value is **0**. |
| autoReset | boolean | true | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite. |
## Events
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onPatternComplete(callback: (input: Array\<number\>) => void) | Invoked when the pattern password input is complete.<br>**input** is an array of digits that represent the connected dots in the pattern (0 to 8) and are arranged in the same sequence as the dots are connected.|
## PatternLockController
Controller bound to the **\<PatternLock>** component for resetting the component status.
### Objects to Import
```typescript
patternLockController: PatternLockController = new PatternLockController()
```
### reset
reset(): void
Resets the component status.
## Example
```typescript
@Entry
@Component
struct PatternLockExample {
@State passwords: Number[] = []
@State message: string = 'please input password'
private patternLockController: PatternLockController = new PatternLockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.message).textAlign(TextAlign.Center)
PatternLock(this.patternLockController)
.sideLength(150)
.circleRadius(7)
.pathStrokeWidth(17)
.backgroundColor(Color.White)
.autoReset(true)
.onPatternComplete((input: Array<number>) => {
if (input == null || input == undefined || input.length < 5) {
this.message = 'The password length needs to be greater than 5.'
return
}
if (this.passwords.length > 0) {
if (this.passwords.toString() == input.toString()) {
this.passwords = input
this.message = 'Set password successfully: ' + this.passwords.toString()
} else {
this.message = 'Inconsistent passwords, please enter again.'
}
} else {
this.passwords = input
this.message = "Please enter again."
}
})
Button('reset button').margin(30).onClick(() => {
this.patternLockController.reset()
this.passwords = []
this.message = 'Please input password'
})
}.width('100%').height('100%')
}
}
```
![patternlock](figures/patternlock.gif)
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md) - [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md) - [Navigation](ts-basic-components-navigation.md)
- [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md) - [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md) - [QRCode](ts-basic-components-qrcode.md)
......
# PatternLock
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
图案密码锁组件,以宫格图案的方式输入密码,用于密码验证。手指触碰图案密码锁时开始进入输入状态,手指离开屏幕时结束输入状态并向应用返回输入的密码。
## 权限列表
## 子组件
## 接口
PatternLock(controller?: PatternLockController)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ----------------------------------------------- | ---- | ------ | -------------------------------------------- |
| controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件状态重置。 |
## 属性
不支持`backgroundColor`以外的通用属性设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | --------------------------------------------------- | ----------- | ------------------------------------------------------------ |
| sideLength | Length | 300vp | 设置组件的宽度和高度(相同值)。最小可以设置为0。 |
| circleRadius | Length | 14vp | 设置宫格圆点的半径。 |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 |
| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 |
| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。 |
## 事件
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格的索引(0到8)。 |
## PatternLockController
PatternLock组件的控制器,可以将此对象绑定至PatternLock组件,然后通过它进行状态重置。
### 导入对象
```typescript
patternLockController: PatternLockController = new PatternLockController()
```
### reset
reset(): void
重置组件状态。
## 示例
```typescript
@Entry
@Component
struct PatternLockExample {
@State passwords: Number[] = []
@State message: string = 'please input password'
private patternLockController: PatternLockController = new PatternLockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.message).textAlign(TextAlign.Center)
PatternLock(this.patternLockController)
.sideLength(150)
.circleRadius(7)
.pathStrokeWidth(17)
.backgroundColor(Color.White)
.autoReset(true)
.onPatternComplete((input: Array<number>) => {
if (input == null || input == undefined || input.length < 5) {
this.message = 'The password length needs to be greater than 5.'
return
}
if (this.passwords.length > 0) {
if (this.passwords.toString() == input.toString()) {
this.passwords = input
this.message = 'Set password successfully: ' + this.passwords.toString()
} else {
this.message = 'Inconsistent passwords, please enter again.'
}
} else {
this.passwords = input
this.message = "Please enter again."
}
})
Button('reset button').margin(30).onClick(() => {
this.patternLockController.reset()
this.passwords = []
this.message = 'Please input password'
})
}.width('100%').height('100%')
}
}
```
![patternlock](figures/patternlock.gif)
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。 id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。
> **说明:** > **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> - 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> - 本模块接口为系统接口。
## 权限列表 ## 权限列表
...@@ -14,7 +16,7 @@ id为组件的唯一标识,在整个应用内唯一。本模块提供组件标 ...@@ -14,7 +16,7 @@ id为组件的唯一标识,在整个应用内唯一。本模块提供组件标
## 属性 ## 属性
| 名称 | 参数说明 | 默认值 | 描述 | | 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ------------------ |
| id | string | '' | 组件的唯一标识,唯一性由使用者保证。 | | id | string | '' | 组件的唯一标识,唯一性由使用者保证。 |
...@@ -29,12 +31,12 @@ getInspectorByKey(id: string): string ...@@ -29,12 +31,12 @@ getInspectorByKey(id: string): string
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| id | string | 是 | - | 要获取属性的组件id。 | | id | string | 是 | - | 要获取属性的组件id。 |
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| -------- | -------- | | ------ | --------------- |
| string | 组件属性列表的JSON字符串。 | | string | 组件属性列表的JSON字符串。 |
### getInspectorTree ### getInspectorTree
...@@ -46,7 +48,7 @@ getInspectorTree(): string ...@@ -46,7 +48,7 @@ getInspectorTree(): string
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------ | ---------------------------------- | | ------ | ------------------- |
| string | 组件树及组件属性列表的JSON字符串。 | | string | 组件树及组件属性列表的JSON字符串。 |
### sendEventByKey ### sendEventByKey
...@@ -57,14 +59,14 @@ sendEventByKey(id: string, action: number, params: string): boolean ...@@ -57,14 +59,14 @@ sendEventByKey(id: string, action: number, params: string): boolean
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| id | string | 是 | - | 要触发事件的组件的id。 | | id | string | 是 | - | 要触发事件的组件的id。 |
| action | number | 是 | - | 要触发的事件类型,目前支持取值:<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 | | action | number | 是 | - | 要触发的事件类型,目前支持取值:<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 |
| params | string | 是 | - | 事件参数,无参数传空字符串&nbsp;""。 | | params | string | 是 | - | 事件参数,无参数传空字符串&nbsp;""。 |
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| -------- | -------- | | ------- | ------------------------------ |
| boolean | 找不到指定id的组件时返回false,其余情况返回true。 | | boolean | 找不到指定id的组件时返回false,其余情况返回true。 |
### sendTouchEvent ### sendTouchEvent
...@@ -76,13 +78,13 @@ sendTouchEvent(event: TouchObject): boolean ...@@ -76,13 +78,13 @@ sendTouchEvent(event: TouchObject): boolean
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ----------- | ---- | ------ | ------------------------------------------------------------ | | ----- | ----------- | ---- | ---- | ---------------------------------------- |
| event | TouchObject | 是 | - | 触发触摸事件的位置,event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 | | event | TouchObject | 是 | - | 触发触摸事件的位置,event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 |
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------- | ------------------------------------------- | | ------- | -------------------------- |
| boolean | 事件发送失败时返回false,其余情况返回true。 | | boolean | 事件发送失败时返回false,其余情况返回true。 |
### sendKeyEvent ### sendKeyEvent
...@@ -94,13 +96,13 @@ sendKeyEvent(event: KeyEvent): boolean ...@@ -94,13 +96,13 @@ sendKeyEvent(event: KeyEvent): boolean
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | -------- | ---- | ------ | ------------------------------------------------------------ | | ----- | -------- | ---- | ---- | ---------------------------------------- |
| event | KeyEvent | 是 | - | 按键事件,event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 | | event | KeyEvent | 是 | - | 按键事件,event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 |
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------- | --------------------------------------------- | | ------- | --------------------------- |
| boolean | 事件发送失败时时返回false,其余情况返回true。 | | boolean | 事件发送失败时时返回false,其余情况返回true。 |
### sendMouseEvent ### sendMouseEvent
...@@ -112,13 +114,13 @@ sendMouseEvent(event: MouseEvent): boolean ...@@ -112,13 +114,13 @@ sendMouseEvent(event: MouseEvent): boolean
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ---------- | ---- | ------ | ------------------------------------------------------------ | | ----- | ---------- | ---- | ---- | ---------------------------------------- |
| event | MouseEvent | 是 | - | 鼠标事件,event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 | | event | MouseEvent | 是 | - | 鼠标事件,event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 |
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------- | --------------------------------------------- | | ------- | --------------------------- |
| boolean | 事件发送失败时时返回false,其余情况返回true。 | | boolean | 事件发送失败时时返回false,其余情况返回true。 |
## 示例 ## 示例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册