首页 > 其他分享 >#盲盒+码##深入浅出学习eTs#(十五)九宫格密码锁

#盲盒+码##深入浅出学习eTs#(十五)九宫格密码锁

时间:2022-11-28 12:06:33浏览次数:76  
标签:eTs 默认值 圆点 九宫格 密码 设置 组件 input 密码锁

【本文正在参加「盲盒」+码有奖征文活动】https://ost.51cto.com/posts/19288 本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)

一、需求分析

相信没有人没有使用过九宫格解锁吧,从智能机开始迸发的时期到现在,我们本期就要做一个自己的密码锁

  • 密码正确可进入
  • 提示密码错误
  • 可修改密码

二、控件介绍

PatternLockOpenAtom OpenHarmony

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

说明:

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

接口

PatternLock(controller?: PatternLockController)

参数:

参数名 参数类型 必填 描述
controller PatternLockController 设置PatternLock组件控制器,可用于控制组件状态重置。

属性

不支持除backgroundColor以外的通用属性设置。

名称 参数类型 描述
sideLength Length 设置组件的宽度和高度(宽高相同)。设置为0或负数等非法值时组件不显示。 默认值:300vp
circleRadius Length 设置宫格中圆点的半径。 默认值:14vp
regularColor ResourceColor 设置宫格圆点在“未选中”状态的填充颜色。 默认值:Color.Black
selectedColor ResourceColor 设置宫格圆点在“选中”状态的填充颜色。 默认值:Color.Black
activeColor ResourceColor 设置宫格圆点在“激活”状态的填充颜色(“激活”状态为手指经过圆点但还未选中的状态)。 默认值:Color.Black
pathColor ResourceColor 设置连线的颜色。 默认值:Color.Blue
pathStrokeWidth number | string 设置连线的宽度。设置为0或负数等非法值时连线不显示。 默认值:34vp
autoReset boolean 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true,完成密码输入后再次在组件区域按下时会重置组件状态(即清除之前输入的密码);反之若设置为false,则不会重置组件状态。 默认值:true

事件

除支持通用事件外,还支持以下事件:

名称 描述
onPatternComplete(callback: (input: Array<number>) => void) 密码输入结束时触发该回调。 input: 与选中宫格圆点顺序一致的数字数组,数字为选中宫格圆点的索引值(第一行圆点从左往右依次为0,1,2,第二行圆点依次为3,4,5,第三行圆点依次为6,7,8)。

1.gif

@Entry @Component struct PatternLockTest {

  build() {
    Column({space: 10}) {
      PatternLock(this.patternLockController)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

三、UI设计

(1)放置九宫格

首先放入一个九宫格,设置参数 2.png

      PatternLock(this.patternLockController)
        .sideLength(350)            // 设置宽高
        .circleRadius(15)            // 设置圆点半径
        .regularColor(Color.Blue)    // 设置圆点颜色
        .pathStrokeWidth(30)        // 设置连线粗细
        .backgroundColor('rgba(209, 219, 229, 0.95)')
        .autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态
        .border({radius:30})
        .onPatternComplete((input: Array<number>) => {
        })

(2)放置按钮

3.png

            Button('清除')
              .width(200)
              .fontSize(20)
              .onClick(() => {
                this.patternLockController.reset();
              })

(3)设置密码

4.png

 @State passwords: Number[] = []

      Text(this.passwords.toString())
        .textAlign(TextAlign.Center)
        .fontSize(22)

        .onPatternComplete((input: Array<number>) => {
          if (input == null || input == undefined || input.length < 5) {
            this.message = "密码长度至少为5位数。";
            return;
          }
          if (this.passwords.length > 0) {
            if (this.passwords.toString() == input.toString()) {
              this.passwords = input
              this.message = "密码设置成功"
            } else {
              this.message = '密码输入错误'
            }
          } else {
            this.passwords = input
            this.message = "密码输入错误"
          }
        })

(4)修改密码

5.png

      Button('重置密码')
        .width(200)
        .fontSize(20)
        .onClick(() => {
          set_flag = 1;
          this.passwords = [];
          this.message = '请输入新的密码';
          this.patternLockController.reset();
        })

四、效果展示

2.gif 设置密码 3.gif 密码错误 4.gif 密码正确

本文作者:程皖Orz

想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com/#bkwz​

标签:eTs,默认值,圆点,九宫格,密码,设置,组件,input,密码锁
From: https://blog.51cto.com/harmonyos/5890809

相关文章

  • Vulnhub之The Planets Mercury靶机详细测试过程
    ThePlanets:Mercury作者:jason_huawen靶机基本信息名称:ThePlanets:Mercury地址:https://www.vulnhub.com/entry/the-planets-mercury,544/识别目标主机IP地址─......
  • “Excel cannot insert the sheets into t
    WhenyoureceivethiserrorinMicrosoftExcel,itwouldseemtobeprettyselfexplanatory.Excelcannotinsertthesheetsintothedestinationworkbook,becau......
  • Windows netstat 查看端口、进程占用
    目标:在Windows环境下,用netstat命令查看某个端口号是否占用,为哪个进程所占用.操作:操作分为两步:(1)查看该端口被那个PID所占用;方法一:有针对性的查看端口,使用命令Netstat–......
  • Fractal Streets
    1.FractalStreets​​https://ac.nowcoder.com/acm/contest/998/G​​题目大意:思路:找规律。矩阵的四个象限对应的坐标转换不同。#include<bits/stdc++.h>#defineendl'\n......
  • petshop4.0 详解之二(数据访问层之数据库访问设计)
    在系列一中,我从整体上分析了PetShop的架构设计,并提及了分层的概念。从本部分开始,我将依次对各层进行代码级的分析,以求获得更加细致而深入的理解。在Pe......
  • petshop4.0 详解之一(系统架构设计)(转载)
    前言:PetShop是一个范例,微软用它来展示.Net企业系统开发的能力。业界有许多.Net与J2EE之争,许多数据是从微软的PetShop和Sun的PetStore而来。这种争论不......
  • MFC-GetSafeHwnd安全获取窗口句柄HWND
    CWnd和HWND句柄的区别 CWnd只能对本控件的属性进行操作, HWND还可以对子控件进行操作 CWnd*转化为HWND CWnd*pWnd=GetDlgItem(IDC_BUTTON2);HWNDhWn......
  • 【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件l
    本站文章均为​​李华明Himi​​​原创,转载务必在明显处注明:(作者新浪微博:​​@李华明Himi​​​) width="150"height="210"framebo......
  • h5活动九宫格转盘-vue
    实现的效果操作步骤首先安装插件#npm安装npminstall@lucky-canvas/vue@latest#或者yarn安装yarnadd@lucky-canvas/vue@latest在main.js中引入//......
  • gets函数的理解和应用
    gets函数的用法。gets函数使用要加头文件#include<string.h>输入时用scanf("%d  ",&b); %d后的空格也可以用\n(换行)代替。此处的空格和换行都起到两个作用。1、结束s......