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

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
简介: 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)
  }
}

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

相关文章
|
7天前
|
C++ 容器
C++中自定义结构体或类作为关联容器的键
C++中自定义结构体或类作为关联容器的键
13 0
|
4天前
|
XML Java 数据格式
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
这篇文章是Spring5框架的实战教程,主要介绍了如何在Spring的IOC容器中通过XML配置方式使用外部属性文件来管理Bean,特别是数据库连接池的配置。文章详细讲解了创建属性文件、引入属性文件到Spring配置、以及如何使用属性占位符来引用属性文件中的值。
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
|
4天前
|
XML Java 数据格式
Spring5入门到实战------4、IOC容器-Bean管理XML方式、集合的注入(二)
这篇文章是Spring5框架的实战教程,主题是IOC容器中Bean的集合属性注入,通过XML配置方式。文章详细讲解了如何在Spring中注入数组、List、Map和Set类型的集合属性,并提供了相应的XML配置示例和Java类定义。此外,还介绍了如何在集合中注入对象类型值,以及如何使用Spring的util命名空间来实现集合的复用。最后,通过测试代码和结果展示了注入效果。
Spring5入门到实战------4、IOC容器-Bean管理XML方式、集合的注入(二)
|
4天前
|
XML Java 数据格式
Spring5入门到实战------6、IOC容器-Bean管理XML方式(自动装配)
这篇文章是Spring5框架的入门教程,详细讲解了IOC容器中Bean的自动装配机制,包括手动装配、`byName`和`byType`两种自动装配方式,并通过XML配置文件和Java代码示例展示了如何在Spring中实现自动装配。
Spring5入门到实战------6、IOC容器-Bean管理XML方式(自动装配)
|
4天前
|
XML Java 数据格式
Spring5入门到实战------5、IOC容器-Bean管理(三)
这篇文章深入探讨了Spring5框架中IOC容器的高级Bean管理,包括FactoryBean的使用、Bean作用域的设置、Bean生命周期的详细解释以及Bean后置处理器的实现和应用。
Spring5入门到实战------5、IOC容器-Bean管理(三)
|
4天前
|
XML Java 数据格式
Spring5入门到实战------3、IOC容器-Bean管理XML方式(一)
这篇文章详细介绍了Spring框架中IOC容器的Bean管理,特别是基于XML配置方式的实现。文章涵盖了Bean的定义、属性注入、使用set方法和构造函数注入,以及如何注入不同类型的属性,包括null值、特殊字符和外部bean。此外,还探讨了内部bean的概念及其与外部bean的比较,并提供了相应的示例代码和测试结果。
Spring5入门到实战------3、IOC容器-Bean管理XML方式(一)
|
4天前
|
XML Java 数据格式
Spring5入门到实战------2、IOC容器底层原理
这篇文章深入探讨了Spring5框架中的IOC容器,包括IOC的概念、底层原理、以及BeanFactory接口和ApplicationContext接口的介绍。文章通过图解和实例代码,解释了IOC如何通过工厂模式和反射机制实现对象的创建和管理,以及如何降低代码耦合度,提高开发效率。
Spring5入门到实战------2、IOC容器底层原理
|
4天前
|
XML Java 数据格式
Spring5入门到实战------8、IOC容器-Bean管理注解方式
这篇文章详细介绍了Spring5框架中使用注解进行Bean管理的方法,包括创建Bean的注解、自动装配和属性注入的注解,以及如何用配置类替代XML配置文件实现完全注解开发。
Spring5入门到实战------8、IOC容器-Bean管理注解方式
|
4天前
|
XML Java 数据格式
Spring5入门到实战------2、IOC容器底层原理
这篇文章深入探讨了Spring5框架中的IOC容器,包括IOC的概念、底层原理、以及BeanFactory接口和ApplicationContext接口的介绍。文章通过图解和实例代码,解释了IOC如何通过工厂模式和反射机制实现对象的创建和管理,以及如何降低代码耦合度,提高开发效率。
Spring5入门到实战------2、IOC容器底层原理
|
9天前
|
监控 负载均衡 开发者
掌握容器化技术:从零基础到实战应用
容器化技术正在快速改变软件开发和部署的方式。在这篇文章中,我们将从基础知识出发,逐步探讨容器化的核心概念、常用工具以及实际应用场景。无论你是刚接触容器化技术的新手,还是希望将现有知识应用到实际项目中的开发者,本文都将为你提供一个全面的入门指南和实战技巧。