鸿蒙5.0版开发：ArkTS基础组件（模式锁定）

最新推荐文章于 2024-10-02 09:54:20 发布

星星不闪包退1

最新推荐文章于 2024-10-02 09:54:20 发布

阅读量974

点赞数 29

分类专栏：鸿蒙5.0 ArkTS ArkUI 文章标签： harmonyos 华为 android 鸿蒙 ArkTS

本文链接：https://blog.csdn.net/m0_69424697/article/details/142339653

版权

鸿蒙5.0 同时被 3 个专栏收录

94 篇文章 0 订阅

订阅专栏

ArkUI

94 篇文章 0 订阅

订阅专栏

ArkTS

90 篇文章 0 订阅

订阅专栏

模式锁定

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

说明：

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

子组件

无

接口

PatternLock（控制器）

参数：

参数名	参数类型	必填	描述
控制器	模式锁定控制器	否	设置PatternLock组件控制器，可用于控制组件状态重置。

属性

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

边长

sideLength（值：Length）

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

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

参数：

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

圆半径

circleRadius （值： Length）

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

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

参数：

参数名	类型	必填	说明
价值	长度	是	宫格中圆点的半径。默认值：6vp

regularColor 的

regularColor（值：ResourceColor）

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

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

参数：

参数名	类型	必填	说明
价值	资源颜色	是	宫格圆点在“未选中”状态的填充颜色。默认值：'#ff182431'

selectedColor （选定颜色）

selectedColor（值：ResourceColor）

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

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

参数：

参数名	类型	必填	说明
价值	资源颜色	是	宫格圆点在“选中”状态的填充颜色。默认值：'#ff182431'

activeColor （活动颜色）

activeColor(value: ResourceColor)

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

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

参数：

参数名	类型	必填	说明
value	ResourceColor	是	宫格圆点在“激活”状态的填充颜色。默认值：‘#ff182431’

pathColor

pathColor(value: ResourceColor)

设置连线的颜色。

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

参数：

参数名	类型	必填	说明
value	ResourceColor	是	连线的颜色。默认值：‘#33182431’

pathStrokeWidth

pathStrokeWidth(value: number | string)

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

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

参数：

参数名	类型	必填	说明
value	number \| string	是	连线的宽度。默认值：12vp

autoReset

autoReset(value: boolean)

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

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

参数：

参数名	类型	必填	说明
value	boolean	是	在完成密码输入后再次在组件区域按下时是否重置组件状态。为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。默认值：true

事件

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

onPatternComplete

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

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

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

参数：

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

onDotConnect11+

onDotConnect(callback: CallBack<number>)

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

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

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

模式锁定控制器

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

导入对象

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:olive">let</span> patternLockController: <span style="color:#0055af">PatternLockController</span> = <span style="color:olive">new</span> <span style="color:#0055af">PatternLockController</span>()
<strong>typescript</strong></code></span></span>

重置

reset（）：无效

重置组件状态。

setChallengeResult11+

setChallengeResult（result： PatternLockChallengeResult）：无效

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

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

PatternLockChallengeResult11+枚举说明

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

示例

<span style="background-color:#f6f8fa"><span style="color:#000000"><code><img data-cke-saved-src="https://docs.openharmony.cn/copy.png" src="https://docs.openharmony.cn/copy.png" alt="" width="20" height="20" class="copy-img" /><span style="color:green">// xxx.ets</span>
<span style="color:green">@Entry</span>
<span style="color:green">@Component</span>
struct <span style="color:#0055af">PatternLockExample</span> {
  <span style="color:green">@State</span> passwords: <span style="color:#0055af">Number</span>[] = []
  <span style="color:green">@State</span> message: <span style="color:green">string</span> = <span style="color:green">'please input password!'</span>
  <span style="color:olive">private</span> patternLockController: <span style="color:#0055af">PatternLockController</span> = <span style="color:olive">new</span> <span style="color:#0055af">PatternLockController</span>()

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