【鸿蒙next开发】ArkUI框架：ArkTS组件-PatternLock

于 2025-05-26 14:12:37 发布
阅读量557 收藏 8
点赞数 11
分类专栏： 鸿蒙5.0开发 ArkTS组件 ArkUI框架 文章标签： harmonyos 华为 ArkUI android 前端 ArkTS 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/148229023
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

PatternLock

图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

PatternLock(controller?: PatternLockController)

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
controllerPatternLockController否设置PatternLock组件控制器，可用于控制组件状态重置。

属性

除支持通用属性外，还支持以下属性：

sideLength

sideLength(value: Length)

设置组件的宽度和高度（宽高相同）。设置为0或负数时组件不显示。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是组件的宽度和高度。默认值：288vp

circleRadius

circleRadius(value: Length)

设置宫格中圆点的半径。设置为0或负数时取默认值。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是

宫格中圆点的半径。

默认值：6vp

取值范围：(0, sideLength/11]，设置小于等于0的值时按默认值处理，超过最大值按最大值处理。

backgroundColor

backgroundColor(value: ResourceColor)

设置背景颜色

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数名类型必填说明
valueResourceColor是背景颜色

regularColor

regularColor(value: ResourceColor)

设置宫格圆点在“未选中”状态的填充颜色。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是

宫格圆点在“未选中”状态的填充颜色。

默认值：'#ff182431'

selectedColor

selectedColor(value: ResourceColor)

设置宫格圆点在“选中“状态的填充颜色。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是

宫格圆点在“选中”状态的填充颜色。

默认值：'#ff182431'

activeColor

activeColor(value: ResourceColor)

设置宫格圆点在“激活”状态的填充颜色，“激活”状态为手指经过圆点但还未选中的状态。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是

宫格圆点在“激活”状态的填充颜色。

默认值：'#ff182431'

pathColor

pathColor(value: ResourceColor)

设置连线的颜色。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是

连线的颜色。

默认值：'#33182431'

pathStrokeWidth

pathStrokeWidth(value: number | string)

设置连线的宽度。设置为0或负数时连线不显示。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是

连线的宽度。

默认值：12vp

取值范围：[0, sideLength/3]，超过最大值按最大值处理。

autoReset

autoReset(value: boolean)

设置在完成密码输入后再次在组件区域按下时是否重置组件状态。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是

在完成密码输入后再次在组件区域按下时是否重置组件状态。

为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。

默认值：true

activateCircleStyle12+

activateCircleStyle(options: Optional<CircleStyleOptions>)

设置宫格圆点在“激活”状态的背景圆环样式。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsCircleStyleOptions是宫格圆点在“激活”状态的背景圆环样式。

CircleStyleOptions12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
colorResourceColor否

背景圆环颜色。

默认值：与pathColor值相同

radiusLengthMetrics否

背景圆环的半径。

默认值：circleRadius的11/6

enableWaveEffectboolean否

波浪效果开关。

默认值：true

事件

除支持通用事件外，还支持以下事件：

onPatternComplete

onPatternComplete(callback: (input: Array<number>) => void)

密码输入结束时触发该回调。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
inputArray<number>是与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

onDotConnect11+

onDotConnect(callback: Callback<number>)

密码输入选中宫格圆点时触发该回调。

回调参数为选中宫格圆点顺序的数字，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

PatternLockController

PatternLock组件的控制器，可以通过它进行组件状态重置。

导入对象

let patternLockController: PatternLockController = new PatternLockController()

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

reset

reset()

重置组件状态。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

setChallengeResult11+

setChallengeResult(result: PatternLockChallengeResult): void

用于设置图案密码正确或错误状态。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数参数类型必填参数描述
resultPatternLockChallengeResult是图案密码状态。

PatternLockChallengeResult11+枚举说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
CORRECT图案密码正确。
WRONG图案密码错误。

示例

示例1（创建图案密码锁）

该示例展示了PatternLock组件的基本使用方法。

// xxx.ets
@Entry
@Component
struct PatternLockExample {
  @State passwords: Number[] = []
  @State message: string = 'please input password!'
  private patternLockController: PatternLockController = new PatternLockController()


  build() {
    Column() {
      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(5)
        .activeColor('#707070')
        .selectedColor('#707070')
        .pathColor('#707070')
        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .onDotConnect((index: number) => {
          console.log("onDotConnect index: " + index)
        })
    }.width('100%').height('100%')
  }
}

示例2（判断密码是否正确）

该示例通过sideLength设置九宫格的大小、circleRadius等属性设置宫格圆点样式、onPatternComplete属性设置密码输入时的回调。

当用户密码输入完成后，按输入的密码不同，给予不同的回应：输入的密码长度小于5时，提示重新输入；第一次输入完成后，提示第二次输入密码；第二次输入完成后，判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入。

通过'Reset PatternLock'按钮，用户可以重置密码锁。

// xxx.ets
import { LengthUnit } from '@kit.ArkUI'


@Entry
@Component
struct PatternLockExample {
  @State passwords: Number[] = []
  @State message: string = 'please input password!'
  private patternLockController: PatternLockController = new PatternLockController()


  build() {
    Column() {
      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(5)
        .activeColor('#707070')
        .selectedColor('#707070')
        .pathColor('#707070')
        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .activateCircleStyle({
          color: '#707070',
          radius: { value: 16, unit: LengthUnit.VP },
          enableWaveEffect: true
        })
        .onDotConnect((index: number) => {
          console.log("onDotConnect index: " + index)
        })
        .onPatternComplete((input: Array<number>) => {
          // 输入的密码长度小于5时，提示重新输入
          if (input.length < 5) {
            this.message = 'The password length needs to be greater than 5, please enter again.'
            return
          }
          // 判断密码长度是否大于0
          if (this.passwords.length > 0) {
            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
            if (this.passwords.toString() === input.toString()) {
              this.passwords = input
              this.message = 'Set password successfully: ' + this.passwords.toString()
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
            } else {
              this.message = 'Inconsistent passwords, please enter again.'
              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
            }
          } else {
            // 提示第二次输入密码
            this.passwords = input
            this.message = "Please enter again."
          }
        })
      Button('Reset PatternLock').margin(30).onClick(() => {
        // 重置密码锁
        this.patternLockController.reset()
        this.passwords = []
        this.message = 'Please input password'
      })
    }.width('100%').height('100%')
  }
}

HarmonyOS鸿蒙开发指南:基础组件 rating开发指导
sybh的博客
01-09 905
场景示例 开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。
鸿蒙5.0版开发：ArkTS基础组件（模式锁定）
m0_69424697的博客
09-18 1122
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。
【鸿蒙基础系列】鸿蒙基础组件
zhaochen1127的博客
08-16 6409
组件（Component）是鸿蒙系统ArkUI声明式开发范式中界面搭建与显示的最小单位。鸿蒙系统为开发者提供了丰富多样的UI组件，这些组件可以根据功能分为五大类：基础组件、容器组件、媒体组件、绘制组件和画布组件。基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button等，它们是构建用户界面的基础。Image组件是鸿蒙UI框架中不可或缺的一部分，它提供了加载和展示图片的基本功能，并通过丰富的样式设置选项和高级应用技巧，使开发者能够轻松实现各种复杂的图片展示效果。
鸿蒙开发基础-组件基础
Nieweishan的博客
08-11 844
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。● AktTS提供原有前端范畴内的一切TypeScript和JavaScript的类型及方法支持● 不是所有都支持- 比如解构不支持（Next版本）● ArkTS采用声明式UI的方法来绘制页面，设置属性，绑定事件struct用来描述UI，包含UI的所有信息，注意不能有继承关系或重名@Component。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Divider组件
zy0412326的专栏
02-12 895
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Divider组件。
前端福音! 一篇文章说明鸿蒙、Flutter、Vue基础组件与基础方法
weixin_48091641的博客
04-29 2204
鸿蒙战略胜利，目前鸿蒙开发是一个急需要人才的缺口，在未来几年势必会有大量的鸿蒙岗位出现，目前所存在的鸿蒙岗位也是给出了相当高的薪资。事实证明，鸿蒙开发确实是一块香饽饽。作为华为自家的操作系统，正在逐步扩张市场份额。想要转行或者入行的朋友可以下手了。在这里，为大家提供一份我整理的鸿蒙开发学习资料，涵盖了UI开发、web、应用模型多个知识点，有需要的朋友可以扫描下方二维码，免费获取更多相关资料。
鸿蒙5.0版开发：ArkTS组件-PatternLock
m0_69424697的博客
11-17 1070
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（自定义绘制设置）
最新发布
Androidbye的博客
12-27 917
当某些组件本身的绘制内容不满足需求时...........
HarmonyOS ArkUI实战开发-手势密码（PatternLock）
m0_70748458的博客
06-01 897
reset();在使用的时候，接收一个类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。build() {sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。：设置宫格圆点的半径，默认值为 14vp。：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。pathColor：设置连线的颜色，默认值为蓝色。
鸿蒙应用框架开发【图案密码锁组件】 UI框架
2301_76813281的博客
07-29 443
本示例展示了图案密码锁组件的使用，实现了密码设置、验证和重置功能。 图案密码锁组件：以宫格图案的方式输入密码，用于密码验证。手指触碰图案密码锁时开始进入输入状态，手指离开屏幕时结束输入状态并向应用返回输入的密码。
HarmonyOS NEXT实战开发：焦点事件
hanyanyou的博客
07-29 949
基础概念与规范.............
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Stepper组件
zy0412326的专栏
02-08 1023
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Stepper组件。
【鸿蒙应用开发基础】常用组件Image详解
HarmonyOS_001的博客
06-13 2015
在本文中，我们向你展示了如何使用 Image 组件。通过学习 Image 组件的用法，你可以在鸿蒙 ArkUI 中轻松地展示各种精美的图片，提升用户体验。总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。
鸿蒙APP入门JS之组件
weixin_59789509的博客
05-18 416
hml:放下一个个盒子，每一个容器组件都在这，嵌套的话默认就是横着排，不嵌套默认就是竖着。 css:定义每个组件，形状，大小，颜色等等。 基础组件 text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart 容器组件 div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dia..
【鸿蒙开发基础学习】UIAbility 组件启动模式
专注移动开发
08-08 1656
UIAbility 的启动模式是指 UIAbility 实例在启动时的不同呈现状态。
鸿蒙Harmony常用容器组件介绍
wodongx123的博客
01-21 2379
本文不介绍Text，Image这种单独的视图控件，主要还是过一下在构成一个复杂页面时所需要的外层的容器组件。免得在实际开发的时候要构建外层组件时不知道要用什么比较好本文虽然也会贴一些测试代码，但是参考还是以鸿蒙的API参考为主，最好在上手这些视图的同时，学习如何看API参考：打开DevEco Studio -> View（视图） -> Tool Windows（工具窗口） -> API reference（API参考） -> ArkTs组件 -> 容器组件。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 871
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
HarmonyOS常用基础组件
旭日的博客
02-04 2249
TabContent的tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数。@Entry@ComponentColumn() {})build() {.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
鸿蒙开发：Universal Keystore Kit（密钥管理服务）【加解密(ArkTS)】
鸿蒙的技术博客
07-08 698
以AES 128密钥为例，完成加解密。具体的场景介绍及支持的算法规格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值