【鸿蒙开发】ArkTS和组件

1. 初识ArkTS语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript生态基础上做了进一步扩展,继承了TS的所有特性。

当前,ArkTS在TS的基础上主要扩展了如下能力:

  • 基本语法:ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
  • 状态管理:ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。
  • 渲染控制:ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

2. 基本语法概述

ArkTS的基本组成如下所示。

  • 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。
  • UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。
  • 自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Index。
  • 系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用。
  • 属性方法:组件可以通过链式调用配置多项属性。
  • 事件方法:组件可以通过链式调用设置多个事件的响应逻辑。

除此之外,ArkTS扩展了多种语法范式来使开发更加便捷:

  • @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述。
  • @Extend/@Styles:扩展内置组件和封装属性样式,更灵活地组合内置组件。
  • stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式。

3. 声明式UI描述

ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。

3.1 无参数组件

如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。

Divider()

3.2 有参数组件

如果组件的接口定义包含构造参数,则在组件后面的“()”配置相应参数。

Image('https://xyz/test.jpg')

4. 创建自定义组件

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。
  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

4.1 基本用法

自定义组件的基本用法

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

4.2 基本结构

  • struct:自定义组件基于struct实现,struct + 自定义组件名 + {...}的组合构成自定义组件,不能有继承关系。对于struct的实例化,可以省略new。
  • @Component:@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。
  • build()函数:build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。
  • @Entry:@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中,最多可以使用@Entry装饰一个自定义组件。@Entry可以接受一个可选的LocalStorage的参数。

4.3 成员函数/变量

自定义组件除了必须要实现build()函数外,还可以实现其他成员函数,成员函数具有以下约束:

  • 自定义组件的成员函数为私有的,且不建议声明成静态函数

自定义组件可以包含成员变量,成员变量具有以下约束:

  • 自定义组件的成员变量为私有的,且不建议声明成静态变量。
  • 自定义组件的成员变量本地初始化有些是可选的,有些是必选的。

4.4 参数规定

可以在build方法里创建自定义组件,在创建自定义组件的过程中,根据装饰器的规则来初始化自定义组件的参数。

@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例,并将创建MyComponent成员变量countDownFrom初始化为10,将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}

4.5 build()函数

所有声明在build()函数的语言,我们统称为UI描述,UI描述需要遵循以下规则:

  • @Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。
@Entry
@Component
struct MyComponent {
  build() {
    // 根节点唯一且必要,必须为容器组件
    Row() {
      ChildComponent() 
    }
  }
}
  • @Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点。

@Component
struct ChildComponent {
  build() {
    // 根节点唯一且必要,可为非容器组件
    Image('test.jpg')
  }
}
  • 不允许声明本地变量。

build() {
  // 反例:不允许声明本地变量
  let a: number = 1;
}
  • 不允许在UI描述里直接使用console.info,但允许在方法或者函数里使用。

build() {
  // 反例:不允许console.info
  console.info('print debug log');
}
  • 不允许创建本地的作用域。

build() {
  // 反例:不允许本地作用域
  {
    ...
  }
}
  • 不允许调用没有用@Builder装饰的方法,允许系统组件的参数是TS方法的返回值。

@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例:不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例:可以调用
      this.doSomeRender();
      // 正例:参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}
  • 不允许switch语法,如果需要使用条件判断,请使用if。

build() {
  Column() {
    // 反例:不允许使用switch语法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}
  • 不允许使用表达式。

build() {
  Column() {
    // 反例:不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

4.6 通用样式

自定义组件通过“.”链式调用的形式设置通用样式。

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI日报:北大Open Sora视频生成更强了;文心一言可以定制你自己的声音;天工 SkyMusic即将免费开放;

🤖📱💼AI应用 北大Open Sora视频生成更强了!时长可达10秒,分辨率更高 【AiBase提要:】 ⭐️ Open-Sora-Plan v1.0.0模型发布 显著提升视频生成质量和文本控制能力 ⭐️ 支持华为昇腾910b芯片,提升运行效率和质量。 ⭐…

智慧安防系统EasyCVR视频汇聚平台接入大华设备无法语音对讲的原因排查与解决

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台支持7*24小时实时高清视频监控,能同时播放多路监控视频流,视频画面1、4、9、16个可选,支持自定义视频轮播。EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标…

CasaOS玩客云部署AList+Aria2结合内网穿透实现公网离线下载文件至网盘

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-cdH8fnSF05FmvunX {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

React - 请你说一说setState是同步的还是异步的

难度级别:中高级及以上 提问概率:70% 在React项目中,使用setState可以更新状态数据,而不能直接使用为this.state赋值的方式。而为了避免重复更新state数据,React首先将state添加到状态队列中,此时我们可以通过shouldComponentUpdate这个钩…

AutoDev 1.8 融合 DevOps 规范和实践,构建演进式 AI 辅助编码

在新版本的 AutoDev 中,我们又融入了一系列软件开发的实践,以更好地辅助开发人员的日常工作。这些新的特性,融合了我们对于 AI 辅助编码的新理解。诸如于: 重构:AI 重命名、坏味道重构、重构建议。提交信息优化&#x…

【Python】OPC UA 服务器扫描工具

引言 OPC UA(开放平台通信统一架构)是一种跨平台的、开放的数据交换标准,广泛用于工业自动化领域。在工业4.0的大背景下,OPC UA服务器在网络中的部署日益增多,如何快速有效地发现这些服务器成为了一个实际需求。本文将…

【opencv】示例-create_mask.cpp 通过鼠标交互产生掩膜图像(黑白图像)

/* * create_mask.cpp * * Author: * Siddharth Kherada <siddharthkherada27[at]gmail[dot]com> * * 这个教程演示了如何制作掩膜图像&#xff08;黑白图像&#xff09;。 * 该程序将输入图像作为源图像&#xff0c;并输出对应的掩膜图像。 */#include "opencv2/im…

【opencv】示例-demhist.cpp 调整图像的亮度和对比度,并在GUI窗口中实时显示调整后的图像以及其直方图。...

#include "opencv2/core/utility.hpp" // 包含OpenCV核心工具库的头文件 #include "opencv2/imgproc.hpp" // 包含OpenCV图像处理的头文件 #include "opencv2/imgcodecs.hpp" // 包含OpenCV图像编码解码的头文件 #include "opencv2/highgui…

3.1_2 内存管理的概念

3.1_2 内存管理的概念 重要考点

不使用 Docker 构建 Triton 服务器并在 Google Colab 平台上部署 HuggingFace 模型

Build Triton server without docker and deploy HuggingFace models on Google Colab platform EnvironmentBuilding Triton serverDeploying HuggingFace models客户端推荐阅读参考 Environment 根据Triton 环境对应表 &#xff0c;Colab 环境缺少 tensorrt-8.6.1&#xff0…

matlab读/写文本数据(矩阵格式)

1、背景介绍 文本格式的点云数据是一种常见的形式,其形式一般如下:x y z。后面可能带有标签、颜色等信息。在使用matlab进行数据处理时,常用的2个操作:读取与写入。有时,点云之间用逗号‘,’进行间隔。 2、数据读取 对于上述两种形式,均可使用load函数进行读取,如下:…

Kali系统的常用安装后开机配置(都是实用的配置)

目录 一.查看当前操作系统的所有版本信息 二.开启root并修改密码 二.启动 Apache 服务&#xff08;用不到可忽略&#xff09; 三.开启Secure Shell&#xff08;ssh&#xff09;服务&#xff0c;才可以使用远程工具&#xff08;xshell&#xff0c;finalshell&#xff09;连接…

(虚拟DOM)前端八股文修炼Day10

一 虚拟 DOM 是什么 虚拟 DOM (Virtual DOM) 本质上是真实 DOM 的一个轻量级的 JavaScript 表示形式。它是一个在内存中的抽象&#xff0c;用于描述真实 DOM 的结构和内容。虚拟 DOM 提供了一种机制&#xff0c;允许开发者通过操作 JavaScript 对象来间接更新页面&#xff0c;…

Clip论文学习

学习过程如上 学习时&#xff0c;图片与文本对应&#xff08;句子&#xff09;&#xff0c;共有n个句子与n个文本&#xff0c;进行对比学习 测试时&#xff0c;将标签句子化&#xff0c;再将其放入encoder中操作。最后找出特征最相似的。 特点&#xff1a;泛化能力强&#x…

点击上传文件

一、页面样式&#xff1a; &#xff08;1&#xff09;点击前&#xff1a; &#xff08;2&#xff09;点击后&#xff1a; 设计&#xff1a;①自定义elementPlus图标&#xff1b;②使用Tooltip实现鼠标悬浮按钮上出现文字提示&#xff1b;③上传与更换的切换样式&#xff1b;…

蓝桥备赛——素数

素数定义 试除法判断 from math import * def if_prime(n):if n==1:return Falsem=int(sqrt(n)+1)for i in range(2,m): #范围是2到根下n+1if n%i==0:return Falsereturn True print(if_prime(5)) 试除法判断素数。就是判断是否除了1和本身还有其他可以整除自己的数,…

模块十三 异常_Object

回顾与重点 模块十二回顾 权限修饰符&#xff1a; public → protected → 默认 → private a. 构造一般用public&#xff1a;便于new对象 b. 成员方法一般用public&#xff1a;便于调用 c. 属性一般用private&#xff1a;封装思想 final&#xff1a;最终的 a. 修饰类&#x…

如何从iPhone恢复已删除的照片

这些照片是我们今天生活中最珍贵的回忆。它们捕捉了我们一生珍惜的时刻。但是&#xff0c;丢失这些记忆可能是毁灭性的&#xff0c;尤其是在不小心从iPhone中删除它们时。 幸运的是&#xff0c;有一些方法可以从iPhone恢复已删除的照片。在这篇博文中&#xff0c;我们将讨论从…

【opencv】示例-detect_mser.cpp 使用 MSER 算法来检测图像中的极值区域

#include <opencv2/core.hpp> // 包含OpenCV核心操作的头文件 #include <opencv2/imgproc.hpp> // 包含图像处理功能的头文件 #include <opencv2/highgui.hpp> // 包含图形用户界面的头文件 #include <opencv2/features2d.hpp> // 包含特征检测相关功能…

【数据结构】考研真题攻克与重点知识点剖析 - 第 5 篇:树与二叉树

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…