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)
  }
}

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

相关文章
|
3天前
|
关系型数据库 应用服务中间件 PHP
实战~如何组织一个多容器项目docker-compose
本文介绍了如何使用Docker搭建Nginx、PHP和MySQL的环境。首先启动Nginx容器并查看IP地址,接着启动Alpine容器并安装curl测试连通性。通过`--link`方式或`docker-compose`配置文件实现服务间的通信。最后展示了Nginx配置文件和PHP代码示例,验证了各服务的正常运行。
18 3
实战~如何组织一个多容器项目docker-compose
|
1月前
|
Java 应用服务中间件 Linux
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
本文主要讲解了Docker的安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库以及Docker容器虚拟化与传统虚拟机比较。
535 11
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
|
19天前
|
存储 缓存 监控
Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
本文介绍了Docker容器性能调优的关键技巧,涵盖CPU、内存、网络及磁盘I/O的优化策略,结合实战案例,旨在帮助读者有效提升Docker容器的性能与稳定性。
54 7
|
24天前
|
Kubernetes Linux 开发者
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
54 5
|
28天前
|
运维 Cloud Native 云计算
云原生之旅:Docker容器化实战
本文将带你走进云原生的世界,深入理解Docker技术如何改变应用部署与运维。我们将通过实际案例,展示如何利用Docker简化开发流程,提升应用的可移植性和伸缩性。文章不仅介绍基础概念,还提供操作指南和最佳实践,帮助你快速上手Docker,开启云原生的第一步。
|
27天前
|
存储 安全 Java
Java多线程编程中的并发容器:深入解析与实战应用####
在本文中,我们将探讨Java多线程编程中的一个核心话题——并发容器。不同于传统单一线程环境下的数据结构,并发容器专为多线程场景设计,确保数据访问的线程安全性和高效性。我们将从基础概念出发,逐步深入到`java.util.concurrent`包下的核心并发容器实现,如`ConcurrentHashMap`、`CopyOnWriteArrayList`以及`BlockingQueue`等,通过实例代码演示其使用方法,并分析它们背后的设计原理与适用场景。无论你是Java并发编程的初学者还是希望深化理解的开发者,本文都将为你提供有价值的见解与实践指导。 --- ####
|
1月前
|
机器学习/深度学习 数据采集 Docker
Docker容器化实战:构建并部署一个简单的Web应用
Docker容器化实战:构建并部署一个简单的Web应用
|
21天前
|
Kubernetes Linux 开发者
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
67 0
|
22天前
|
存储 Cloud Native 开发者
深入探索容器化技术——Docker的实战应用
深入探索容器化技术——Docker的实战应用
35 0
|
23天前
|
JavaScript Linux 持续交付
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
48 0