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

简介: 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)
  }
}

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

相关文章
|
8月前
|
监控 Kubernetes 安全
还没搞懂Docker? Docker容器技术实战指南 ! 从入门到企业级应用 !
蒋星熠Jaxonic,技术探索者,以代码为笔,在二进制星河中书写极客诗篇。专注Docker与容器化实践,分享从入门到企业级应用的深度经验,助力开发者乘风破浪,驶向云原生新世界。
797 51
还没搞懂Docker? Docker容器技术实战指南 ! 从入门到企业级应用 !
|
11月前
|
缓存 监控 前端开发
告别卡顿!3大前端性能优化魔法 + CSS容器查询实战
告别卡顿!3大前端性能优化魔法 + CSS容器查询实战
343 95
|
12月前
|
运维 监控 数据可视化
容器化部署革命:Docker实战指南
容器化部署革命:Docker实战指南
|
8月前
|
XML Java 测试技术
《深入理解Spring》:IoC容器核心原理与实战
Spring IoC通过控制反转与依赖注入实现对象间的解耦,由容器统一管理Bean的生命周期与依赖关系。支持XML、注解和Java配置三种方式,结合作用域、条件化配置与循环依赖处理等机制,提升应用的可维护性与可测试性,是现代Java开发的核心基石。
|
Ubuntu Linux Docker
Docker容器的实战讲解
这只是Docker的冰山一角,但是我希望这个简单的例子能帮助你理解Docker的基本概念和使用方法。Docker是一个强大的工具,它可以帮助你更有效地开发、部署和运行应用。
308 27
|
JavaScript Linux 持续交付
深入探索容器化技术——Docker 的实战应用
深入探索容器化技术——Docker 的实战应用
425 89
|
Ubuntu NoSQL Linux
《docker基础篇:3.Docker常用命令》包括帮助启动类命令、镜像命令、有镜像才能创建容器,这是根本前提(下载一个CentOS或者ubuntu镜像演示)、容器命令、小总结
《docker基础篇:3.Docker常用命令》包括帮助启动类命令、镜像命令、有镜像才能创建容器,这是根本前提(下载一个CentOS或者ubuntu镜像演示)、容器命令、小总结
737 6
《docker基础篇:3.Docker常用命令》包括帮助启动类命令、镜像命令、有镜像才能创建容器,这是根本前提(下载一个CentOS或者ubuntu镜像演示)、容器命令、小总结
|
人工智能 安全 API
容器化AI模型的安全防护实战:代码示例与最佳实践
本文基于前文探讨的容器化AI模型安全威胁,通过代码示例展示如何在实际项目中实现多层次的安全防护措施。以一个基于TensorFlow的图像分类模型为例,介绍了输入验证、模型加密、API认证和日志记录的具体实现方法,并结合最佳实践,如使用安全容器镜像、限制权限、网络隔离等,帮助构建更安全的AI服务。
|
机器学习/深度学习 人工智能 Kubernetes
容器化AI模型部署实战:从训练到推理
在上一篇中,我们探讨了AI技术如何赋能容器化生态。本篇聚焦于AI模型的容器化部署,通过图像分类任务实例,详细介绍了从模型训练到推理服务的完整流程。使用PyTorch训练CNN模型,Docker打包镜像,并借助Kubernetes进行编排和部署,最终通过FastAPI提供推理服务。容器化技术极大提升了AI模型部署的便利性和管理效率,未来将成为主流趋势。