HarmonyOS应用开发之ArkTS语言学习记录

1、ArkTS介绍

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。具体介绍可查看官方文档:ArkTS 语言 | 华为开发者联盟

2、初识ArkTS语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。

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

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

3、基础语法概述

在初步了解了ArkTS语言之后,我们以一个具体的示例来说明ArkTS的基本组成。如下图所示,当点击按钮时,文本内容从“Hello World”变为“Hello ArkUI”。

图1 示例效果图

本示例中,ArkTS的基本组成如下所示。

图2 ArkTS的基本组成

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

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

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

4、声明式UI描述

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

  • 创建组件:根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。
  • 配置属性:属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行。
  • 配置事件:事件方法以“.”链式调用的方式配置系统组件支持的事件,建议每个事件方法单独写一行。
  • 使用lambda表达式配置组件的事件方法。
  • 使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件。
  • 使用组件的成员函数配置组件的事件方法。
  • 配置子组件:如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。(容器组件即支持嵌套子组件)

5、自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

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

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

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

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

相关文章

【React系列】Hook(二)高级使用

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是…

通过消费者特征,设计更符合市场的商业模式,树立标杆用户拓展用户圈层

迅腾文化观察:通过消费者特征,设计更符合市场的商业模式,树立标杆用户拓展用户圈层 在当今快速变化的市场环境中,企业需要不断创新和调整自己的商业模式,以适应消费者的需求和市场的发展。迅腾文化观察到,…

经常耳鸣别大意,可能是这6种疾病的预警信号

你在日常生活中有没有遇到过这样的情况:耳朵里突然出现一阵响声,有时候像流水、有时候像蝉鸣、有时候像机器轰鸣……这些往往都是耳鸣的表现。 而耳鸣是一种很常见的症状,一项发表于《美医学会杂志:神经病学分册》的研究表明&…

机器学习分类

1. 监督学习 监督学习指的是人们给机器一大堆标记好的数据,比如: 一大堆照片,标记出哪些是猫的照片,哪些是狗的照片 让机器自己学习归纳出算法或模型 使用该算法或模型判断出其他没有标记的照片是否是猫或狗 上述流程如下图所…

ChatGPT大升级,文档图像识别领域迎来技术革新

​写在前面ChatGPT迎来重大升级冲击与机遇并存​大模型时代的思考与探索■ 像素级OCR统一模型- UPOCR■ OCR大一统模型- SPTS v3■ 文档识别分析LLM应用 写在最后问卷抽奖 ​写在前面 2023 年 12 月 31 日第十九届中国图象图形学学会青年科学家会议在广州召开,该会…

ZigBee协议栈 -- 协议栈版本与IAR版本适配说明(Zstack2.5.1a + IAR10.30.1)

文章目录 协议栈安装工程适配 在讲到ZigBee协议栈的文章中所用的协议栈版本是Zstack2.5.1a,对于Zstack2.5.1a运行在IAR8.10中是可以完全适配进行编译开发的,现在较新版本的IAR都是10的版本以上了,有部分开发者习惯使用最新版本来获得更好的开…

Python 可视化 web 神器 streamlit

官网:https://streamlit.io/ github:https://github.com/streamlit/streamlit API 参考:https://docs.streamlit.io/library/api-reference 1、streamlit 简介 streamlit 简介 Streamlit 是Python可视化 web 神器 ,是一个开箱即…

Open3D聚类算法

按照官网的例子使用聚类,发现结果是全黑的。 经过多次测试发现 eps3.3, min_points1这里是关键 min_points必须等于1否则无效果 import time import open3d as o3d; import numpy as np; import matplotlib.pyplot as plt#坐标 mesh_coord_frame o3d.geometry.Tria…

自定义ChatGPT商店下周上线!大模型“App Store时刻”来啦

1月5日凌晨,OpenAI向所有自定义GPT开发者发布了一封邮件,下周将上线“自定义GPT商店”。 自定义GPTs是OpenAI在去年首届开发者大会上发布的重磅产品,用户无需任何代码,全程支持可视化点击操作。 用户只需要提交对话指令、额外的…

企业核心技术泄露可能给企业带来深远的负面影响以及补救措施

企业核心技术是企业竞争优势的重要来源,但同时也是企业面临的最大风险之一。随着信息技术的发展,企业核心技术泄露的风险也越来越大。一旦企业核心技术泄露,不仅会给企业带来直接的经济损失,还会对企业的品牌形象、市场竞争力、战…

led台灯哪些牌子性价比高?那些性价比高的LED护眼台灯推荐

台灯作为家居用品在日常生活中使用频繁。用户可以根据个人需求和喜好,在市场上找到合适的款式。然而,由于台灯种类繁多,甚至连相关标准都存在差异,这使得一些缺乏经验的购物小白感到困扰。那么,led台灯哪些牌子性价比高…

提升图像分割精度:学习UNet++算法

文章目录 一、UNet 算法简介1.1 什么是 UNet 算法1.2 UNet 的优缺点1.3 UNet 在图像分割领域的应用 二、准备工作2.1 Python 环境配置2.2 相关库的安装 三、数据处理3.1 数据的获取与预处理3.2 数据的可视化与分析 四、网络结构4.1 UNet 的网络结构4.2 UNet 各层的作用 五、训练…

SpringCloud之Eureka组件工作原理详解

Eureka是一种服务注册与发现组件,最初由Netflix开发并开源出来。它主要用于构建分布式系统中的微服务架构,并提供了服务注册、服务发现、负载均衡等功能。在本文中,我们将详细解释Eureka的工作原理。 一、Eureka概述 Eureka是Netflix开源的一…

MySQL数据库的CURD、常见函数及UNION和UNION ALL

一、概述 MySQL是一种流行的关系型数据库管理系统,广泛应用于各种应用场景。在MySQL中,CURD操作是指创建(Create)、读取(Read)、更新(Update)和删除(Delete)…

ROS学习笔记(9)进一步深入了解ROS第三步

0.前提 1. (C)Why did you include the header file of the message file instead of the message file itself?(为包含消息的头文件而不是消息本身?) 回答:msg文件是描述ROS消息字段的文本文件,用于生成不同语言消息…

【Mars3d】new mars3d.layer.GeoJsonLayer({不规则polygon加载label不在正中间的解决方案

问题: 1.new mars3d.layer.GeoJsonLayer({type: "polygon",在styleOptions里配置label的时候,发现这个 不规则polygon加载的时候,会出现label不在中心位置。 graphicLayer new mars3d.layer.GeoJsonLayer({ name: "全国省界…

游戏Lua调用01.lua的编译及测试

一、lua库下载与编译 进入lua官网 Lua: version history 找到lua5.1 选择lua5.1是因为大部分游戏使用的都是lua5.1的库,也可以选择高版本,影响不大 下载完了后使用vs建立一个静态库或者动态库的工程 这里以动态库为例子,静态库也是一样的…

6 网关和配置服务器

文章目录 网关模式Spring Cloud网关Spring Cloud网关微服务其他项目的变更运行和测试小结 运行状况Spring Boot Actuator在微服务中包含Actuator 服务发现和负载均衡ConsulSpring Cloud ConsulSpring Cloud负载均衡器网关中的服务发现和负载均衡使用服务发现和负载均衡 环境配置…

vins 实机测试 rs_d435 + imu

vins 实机测试 文章目录 1. imu标定2. camera内参标定3. imu-cam 外参标定4. vins 实际运行5. realsense 1. imu标定 git clone https://github.com/gaowenliang/code_utils.git git clone https://github.com/gaowenliang/imu_utils.git编译运行, roslaunch imu_…

CSS基本知识

文章目录 1. CSS 是什么2. 基本语法规范3. 引入方式3.1 内部样式表3.2 行内样式表3.3 外部样式 4. 选择器4.1 选择器的功能4.2 选择器的种类4.3 基础选择器4.3.1 标签选择器4.3.2 类选择器4.3.3 id 选择器4.3.4 通配符选择器 4.4 复合选择器4.4.1 后代选择器4.4.2 伪类选择器 5…
最新文章