diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md index 466f2665d65561216c855d40747aa7376c3c0f2d..920011880fa269fda1f8d28488fb77f8688012be 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md @@ -1,4 +1,6 @@ -# PatternLock8+ +# PatternLock + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 图案密码锁组件,以宫格图案的方式输入密码,用于密码验证。 @@ -24,37 +26,37 @@ PatternLock(controller?: PatternLockController) | ------------- | -------------- | | reset():void; | 重置组件状态。 | -## 属性方法 +## 属性 不支持*`backgroundColor`*以外的通用属性设置。 -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------- | ---------------- | ----------- | ------------------------------------------------------------ | -| sideLength | Length | 300dp | 设置组件的宽度和高度(相同值)。最小可以设置为0。 | -| circleRadius | Length | 14dp | 设置宫格圆点的半径。 | -| backgroundColor | ResourceColor | 无 | 设置组件的背景色。 | -| regularColor | ResourceColor | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 | -| selectedColor | ResourceColor | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 | -| activeColor | ResourceColor | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 | -| pathColor | ResourceColor | Color.Blue | 设置线段的颜色。 | -| pathStrokeWidth | number or string | 34dp | 设置连线的宽度。最小可以设置为0。 | -| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| --------------- | ------------- | ----------- | ------------------------------------------------------------ | +| sideLength | Length | 300vp | 设置组件的宽度和高度(相同值)。最小可以设置为0。 | +| circleRadius | Length | 14vp | 设置宫格圆点的半径。 | +| regularColor | ResourceColor | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 | +| selectedColor | ResourceColor | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 | +| activeColor | ResourceColor | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 | +| pathColor | ResourceColor | Color.Blue | 设置连线的颜色。 | +| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 | +| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。 | -## 事件方法 +## 事件 -| 事件名 | 参数类型 | 默认值 | 描述 | -| -------------------------------------------------------- | ------------- | ------ | ------------------------------------------------------------ | -| onPatternComplete | Array | 无 | 指定输入状态结束时被调用的回调函数,参数是和输入顺序一致的数字数组。 | +| 名称 | 功能描述 | +| -------------------------------------------------------- | ------------------------------------------------------------ | +| onPatternComplete(callback: (input: Array) => void) | 指定输入状态结束时被调用的回调函数,参数是和输入顺序一致的数字数组。 | ## 示例 ```typescript @Entry @Component -struct SwiperExample { +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) @@ -62,10 +64,6 @@ struct SwiperExample { .sideLength(150) .circleRadius(7) .pathStrokeWidth(17) - .regularColor(Color.Black) - .selectedColor(Color.Black) - .activeColor(Color.Black) - .pathColor(Color.Blue) .backgroundColor(Color.White) .autoReset(true) .onPatternComplete((input: Array) => { @@ -95,5 +93,5 @@ struct SwiperExample { } ``` -![](.\figures\patternlock.gif) +![patternlock](figures\patternlock.gif)