Arkui的线性容器类完成二维码需求和PatternLock的实战详解

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: Arkui的线性容器类完成二维码需求和PatternLock的实战详解

@[toc]

线性容器类

线性容器类包括List、ArrayList、LinkedList、Vector、Deque、Queue和Stack。底层主要通过阵列实现。线性容器类API充分考虑了数据访问的速度,并在运行时通过一条指令实现了添加、删除、修改和查询等操作。

列表

List可用于构造单向链表对象,即尾部节点只能从头部节点访问。根据泛型定义,List在内存中的存储位置可以是不连续的。可以通过get/set接口修改存储的元素。用于添加、删除、修改和查询列表的API如下:

declare class List<T> {

  constructor();
  length: number;
  add(element: T): boolean;
  get(index: number): T;
  has(element: T): boolean;
  getIndexOf(element: T): number;
  removeByIndex(index: number): T;
  remove(element: T): boolean;
  getLastIndexOf(element: T): number;
  forEach(callbackfn: (value: T, index?: number, List?: List<T>) => void,
  thisArg?: Object): void;
  convertToArray(): Array<T>;
  isEmpty(): boolean;
  [Symbol.iterator](): IterableIterator<T>;
  // 省略部分API
  
}

LinkedList

LinkedList可用于构造双向链表对象,该对象可以在节点处向前或向后遍历list。根据一般定义,LinkedList可以存储在内存中不连续的位置。可以通过get/set和其他接口修改存储的元素。LinkedList添加、删除、修改和查询的API如下:

declare class LinkedList<T> {

  constructor();
  length: number;
  add(element: T): boolean;
  insert(index: number, element: T): void;
  get(index: number): T;
  addFirst(element: T): void;
  removeFirst(): T;
  removeLast(): T;
  has(element: T): boolean;
  getIndexOf(element: T): number;
  removeByIndex(index: number): T;
  remove(element: T): boolean;
  removeFirstFound(element: T): boolean;
  removeLastFound(element: T): boolean;
  getLastIndexOf(element: T): number;
  getFirst(): T;
  getLast(): T;
  set(index: number, element: T): T;
  forEach(callbackfn: (value: T, index?: number, LinkedList?: LinkedList<T>) => void,
  thisArg?: Object): void;
  clear(): void;
  [Symbol.iterator](): IterableIterator<T>;
  // 省略部分API
  
}

媒体查询语法

调用媒体查询接口matchMediaSync()设置媒体查询条件和查询结果的回调函数,并在相应条件的回调函数中更改页面布局或实现业务逻辑。matchMediaSync()方法的条件参数的语法格式如下:

[media-type] [and|not|only] [(media-feature)]

媒体类型:媒体类型。参数支持屏幕,这意味着查询条件基于媒体查询的屏幕相关参数。
而|not|only|或:媒体逻辑运算符,用于形成复杂的媒体查询。它也可以通过逗号(,)组合,如下表所示。

二维码组件

二维码的使用在生活中随处可见,比如扫码加好友、扫码骑车、扫码支付。ArkUI开发框架提供了生成QR码的RQCode组件。本节简要介绍其用途。

QRCode('Hello, OpenHarmony')
  .width(70)
  .height(70)

color:设置二维码颜色,默认黑色。

backgroundColor:设置二维码背景色。

简单样例如下所示:

QRCode('Hello, OpenHarmony')
  .width(70)
  .height(70)
  .color(Color.Red)

QRCode('Hello, OpenHarmony')
  .width(70)
  .height(70)
  .color(Color.Pink)
  .backgroundColor('#aabbcc')

手势密码PatternLock

使用PatternLock时,它接收PatternLockController类型的控制器,用于控制组件的状态,例如重置解锁状态。
一个简单的例子如下:

@Entry @Component struct PatternLockTest {

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

在这里插入图片描述

SideLength:设置组件的宽度和高度。默认值为300vp,最小值可以设置为0。
CircleRadius:设置栅格点的半径。默认值为14vp。
RegularColor:将宫殿点的填充颜色设置为“未选择”状态。默认值为黑色。
SelectedColor:在“选定”状态下设置宫点的填充颜色。默认值为黑色。
ActiveColor:将子宫网格点的填充颜色设置为“活动”状态。默认值为黑色。
pathColor:设置连接的颜色。默认值为蓝色。
PathStrokeWidth:设置线条的宽度。默认值为34vp,最小值可以设置为0。
自动重置:设置用户在完成输入后是否可以再次触摸屏幕以重置组件状态。如果设置为true,用户可以通过触摸模式密码锁来重置组件状态(清除之前的输入效果);如果设置为false,在用户离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)将无法更改之前的输入状态。

@Entry @Component struct PatternLockTest {

  @State passwords: Number[] = []
  @State message: string = '请验证密码'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column({space: 10}) {
      Text(this.message)
        .textAlign(TextAlign.Center)
        .fontSize(22)

      PatternLock(this.patternLockController)
        .sideLength(200)            // 设置宽高
        .circleRadius(7)            // 设置圆点半径
        .regularColor(Color.Red)    // 设置圆点颜色
        .pathStrokeWidth(10)        // 设置连线粗细
        .backgroundColor(Color.Pink)// 设置背景色
        .autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态
        .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 = "密码输入错误"
          }
        })
      Button('重置密码')
        .onClick(() => {
          this.passwords = [];
          this.message = '请验证手势密码';
          this.patternLockController.reset();
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

运行结果如下:
在这里插入图片描述

相关文章
|
19天前
|
Java 应用服务中间件 Linux
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
本文主要讲解了Docker的安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库以及Docker容器虚拟化与传统虚拟机比较。
277 11
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
|
3月前
|
XML Java 数据格式
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
这篇文章是Spring5框架的实战教程,主要介绍了如何在Spring的IOC容器中通过XML配置方式使用外部属性文件来管理Bean,特别是数据库连接池的配置。文章详细讲解了创建属性文件、引入属性文件到Spring配置、以及如何使用属性占位符来引用属性文件中的值。
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
|
3天前
|
Kubernetes Linux 开发者
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
23 5
|
2月前
|
运维 Cloud Native Docker
云原生技术入门:Docker容器化实战
【9月更文挑战第20天】本文将引导你走进云原生技术的世界,通过Docker容器化技术的实战演练,深入理解其背后的原理和应用。我们将一起探索如何在云平台上利用Docker简化部署、扩展和管理应用程序的过程,并揭示这一技术如何改变现代软件的开发和运维模式。
|
1月前
|
XML Java 数据格式
Spring IOC容器的深度解析及实战应用
【10月更文挑战第14天】在软件工程中,随着系统规模的扩大,对象间的依赖关系变得越来越复杂,这导致了系统的高耦合度,增加了开发和维护的难度。为解决这一问题,Michael Mattson在1996年提出了IOC(Inversion of Control,控制反转)理论,旨在降低对象间的耦合度,提高系统的灵活性和可维护性。Spring框架正是基于这一理论,通过IOC容器实现了对象间的依赖注入和生命周期管理。
71 0
|
2月前
|
Linux pouch 容器
CentOS7部署阿里巴巴开源的pouch容器管理工具实战
关于如何在CentOS 7.6操作系统上安装和使用阿里巴巴开源的Pouch容器管理工具的实战教程。
126 2
CentOS7部署阿里巴巴开源的pouch容器管理工具实战
|
1月前
|
Ubuntu Linux 应用服务中间件
Docker容器入门实战
Docker容器入门实战
|
3月前
|
XML Java 数据格式
Spring5入门到实战------3、IOC容器-Bean管理XML方式(一)
这篇文章详细介绍了Spring框架中IOC容器的Bean管理,特别是基于XML配置方式的实现。文章涵盖了Bean的定义、属性注入、使用set方法和构造函数注入,以及如何注入不同类型的属性,包括null值、特殊字符和外部bean。此外,还探讨了内部bean的概念及其与外部bean的比较,并提供了相应的示例代码和测试结果。
Spring5入门到实战------3、IOC容器-Bean管理XML方式(一)
|
3月前
|
XML Java 数据格式
Spring5入门到实战------5、IOC容器-Bean管理(三)
这篇文章深入探讨了Spring5框架中IOC容器的高级Bean管理,包括FactoryBean的使用、Bean作用域的设置、Bean生命周期的详细解释以及Bean后置处理器的实现和应用。
Spring5入门到实战------5、IOC容器-Bean管理(三)
|
3月前
|
XML Java 数据格式
Spring5入门到实战------4、IOC容器-Bean管理XML方式、集合的注入(二)
这篇文章是Spring5框架的实战教程,主题是IOC容器中Bean的集合属性注入,通过XML配置方式。文章详细讲解了如何在Spring中注入数组、List、Map和Set类型的集合属性,并提供了相应的XML配置示例和Java类定义。此外,还介绍了如何在集合中注入对象类型值,以及如何使用Spring的util命名空间来实现集合的复用。最后,通过测试代码和结果展示了注入效果。
Spring5入门到实战------4、IOC容器-Bean管理XML方式、集合的注入(二)
下一篇
无影云桌面