开启鸿蒙开发探索之旅ArkTS基本语法介绍(3)

上一章简单的介绍了鸿蒙HUAWEI DevEco Studio框架的搭建,这一章讲一下鸿蒙的主要开发一眼ArkTS的基本语法结构

1.ArkTS语法解释

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

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

未来,ArkTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

2.基本语法结构

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

图1 示例效果图

 

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

图2 ArkTS的基本组成

1.装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。
2.UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。
3.自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。
4.系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用,比如示例中的Column、Text、Divider、Button。
5.属性方法:组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等。
6.事件方法:组件可以通过链式调用设置多个事件的响应逻辑,如跟随在Button后面的onClick()。
除此之外,ArkTS扩展了多种语法范式来使开发更加便捷:
@Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述。
@Extend/@Style:扩展内置组件和封装属性样式,更灵活地组合内置组件。
stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式。 

3.声明式UI描述

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

创建组件

根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。

无参数

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

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

有参数

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

  • Image组件的必选参数src。

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

Text组件的非必选参数content。

// string类型的参数
Text('test')
// $r形式引入应用资源,可应用于多语言场景
Text($r('app.string.title_value'))
// 无参数形式
Text()

变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。

例如,设置变量或表达式来构造Image和Text组件的参数。

Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${this.count}`)

 

配置属性

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行。

  • 配置Text组件的字体大小。

Text('test')
  .fontSize(12)

 配置组件的多个属性。

Image('test.jpg')
  .alt('error.jpg')    
  .width(100)    
  .height(100)

除了直接传递常量参数外,还可以传递变量或表达式。

Text('hello')
  .fontSize(this.size)
Image('test.jpg')
  .width(this.count % 2 === 0 ? 100 : 200)    
  .height(this.offset + 100)

对于系统组件,ArkUI还为其属性预定义了一些枚举类型供开发者调用,枚举类型可以作为参数传递,但必须满足参数类型要求。

例如,可以按以下方式配置Text组件的颜色和字体样式。

Text('hello')
  .fontSize(20)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Bold)

配置事件

事件方法以“.”链式调用的方式配置系统组件支持的事件,建议每个事件方法单独写一行。

  • 使用lambda表达式配置组件的事件方法。

  • Button('Click me')
      .onClick(() => {
        this.myText = 'ArkUI';
      })

    使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件。

  • Button('add counter')
      .onClick(function(){
        this.counter += 2;
      }.bind(this))
    

    使用组件的成员函数配置组件的事件方法。

  • myClickHandler(): void {
      this.counter += 2;
    }
    ...
    Button('add counter')
      .onClick(this.myClickHandler.bind(this))

    如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

  • 以下是简单的Column组件配置子组件的示例。

  • Column() {
      Text('Hello')
        .fontSize(100)
      Divider()
      Text(this.myText)
        .fontSize(100)
        .fontColor(Color.Red)
    }

    容器组件均支持子组件配置,可以实现相对复杂的多级嵌套。

  • Column() {
      Row() {
        Image('test1.jpg')
          .width(100)
          .height(100)
        Button('click +1')
          .onClick(() => {
            console.info('+1 clicked!');
          })
      }
    }

这里简单的介绍了ArkTS的基础, 详细的文档都在华为官网里

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

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

相关文章

信道编码理论【信息论安全】

目录 一. 信道编码模型 二. 信道编码速率与错误译码率 2.1 信道编码速率 2.2 平均错误率 三. 信道容量 四. 小结 一. 信道编码模型 (1)消息 假定消息集合为M,如下: (2)编码 将消息m映射成码字&…

怎么在PDF添加文本框?6种快速向PDF添加文字教程

有时您可能希望填写表格或在 PDF 文件中留下评论。这需要您将文本框和文本添加到 PDF。文本框是一个文本字段,您可以在其中键入文本。但是,除非您使用专用的 PDF 编辑器,否则编辑 PDF 文件具有挑战性。了解正确的 PDF 工具和将文本框添加到 P…

松木和桉木建筑模板:它们的性能和用途有何区别?

在建筑行业中,选择合适的模板材料对于保证施工质量和效率至关重要。松木和桉木是两种常用的建筑模板材料,它们各有特点和优势。特别是桉木,在某些方面相比松木有显著的优势。 松木建筑模板的特点 松木因其广泛的可用性和经济性而被广泛应用…

软件工程各种图

参考视频: 6 分钟学会 UML 类图_哔哩哔哩_bilibili 5 分钟学会 UML 时序图(顺序图、序列图)_哔哩哔哩_bilibili 3 分钟学会 UML 活动图_哔哩哔哩_bilibili 6 分钟学会 UML 用例图_哔哩哔哩_bilibili 是真的讲的非常好!&#…

高保真度与流畅度MagicVideo-V2视频生成模型;3D人形虚拟角色;微调量化的扩散模型;自动给视频配音;非自回归音频生成

本文首发于公众号:机器感知 高保真度与流畅度MagicVideo-V2视频生成模型;3D人形虚拟角色;微调量化的扩散模型;自动给视频配音;非自回归音频生成 MagicVideo-V2: Multi-Stage High-Aesthetic Video Generation 本文提…

找不到msvcr120.dll怎样修复,分享4种修复方法

msvcr120.dll是Microsoft Visual C 2012 Redistributable Package的一个关键组件,负责提供C运行时库。许多应用程序在运行时都需要依赖这个库文件。然而,在日常使用过程中,不少用户会遇到msvcr120.dll丢失的问题,导致程序无法正常…

【PaperReading】3. PTP

Category Content 论文题目 Position-guided Text Prompt for Vision-Language Pre-training Code: ptp 作者 Alex Jinpeng Wang (Sea AI Lab), Pan Zhou (Sea AI Lab), Mike Zheng Shou (Show Lab, National University of Singapore), Shuicheng Yan (Sea AI Lab) 另一篇…

SpringBoot中使用SpringRetry实现重试机制(重试调用第三方API)

场景 SpringbootFastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文): SpringbootFastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文)_fastjson 发送http请求 接收实体,出现日期转换异常-CSDN博客 在调用…

中国社科院与新加坡社科大联合培养博士——快节奏,慢城市

现在都市生活都很快,小城市虽然节奏慢,但是相对来说,很多人反而愿意选择去快节奏的大城市,首先就是很现实的问题,薪资待遇,其次就是大城市缴纳的社会保险等到退休那一天会比在小城市多一点,为什…

postman使用-06断言

文章目录 一、断言定义二、 常用的断言三、断言-状态码(1)单一状态码断言:Status code:Code is 200 检查返回的状态码是否为200原始模板:修改后:括号里的200也可以改成自己要断言的状态码具体步骤:断言成功…

制造业CRM是什么?都有哪些特色功能?

近些年,制造业和别的行业一样,经历过翻天覆地的转型。从以分销为基础到客户至上,所有行业都在确定商业模式的全局性变化。在这样的环境下,不管什么规模的设备制造企业都意识到将创新与技术融进业务流程的必要性。CRM管理系统是促进…

Windows安装Rust环境(详细教程)

一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio,但该工具占用空间大安装也较为麻烦,可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub:Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…

C++力扣题目257--二叉树的所有路径

给你一个二叉树的根节点 root ,按 任意顺序 ,返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1: 输入:root [1,2,3,null,5] 输出:["1->2->5","1->3"]示例 …

如何进行大数据系统测试

大数据系统常见的架构形式有如下几种: Hadoop架构: Hadoop Distributed File System (HDFS):这是一种分布式文件系统,设计用于存储海量数据并允许跨多台机器进行高效访问。 MapReduce:作为Hadoop的核心计算框架&#…

1.5 Unity中的数据存储 PlayerPrefs

Unity中的三种数据存储:数据存储也称为数据持久化 一、PlayerPrefs PlayerPrefs是Unity引擎自身提供的一个用于本地持久化保存与读取的类,以键值对的形式将数据保存在文件中,然后程序可以根据关键字提取数值。 PlayerPrefs类支持3种数据类…

php中常用的几个安全函数

1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助,它对特殊的字符,像单引号和双引号,加上了“反斜杠”,确保用户的输入在用它去查询以前已经是安全的了。但你要注意你是在连接着数据库的情况下使用这个…

UG装配-动态干涉检查

如果设计的产品有运动部件,除了做静态干涉检查外,通常还要做动态干涉检查 动态检查可以使用如下命令:移动组件,序列 在动态干涉检查前,先装配好组件,并且是可运动状态 在使用移动组件命令对运动部件进行…

DePIN:重塑物理资源网络的未来

点击查看TechubNews更多相关推荐 一、DePIN:物理资源的新整合方式 Depin赛道的项目如雨后春笋般涌现,为市场注入了新的活力。作为先行者,Coinmanlabs已经深入布局Depin赛道,其中最引人注目的项目当属Grass。 什么是DePIN DePIN…

Flashduty 案例分享 - 途游游戏

Flashduty 作为功能完备的事件OnCall中心,可以接入云上、云下不同监控系统,统一做告警降噪分派、认领升级、排班协同,已经得到众多先进企业的认可。我们采访了一些典型客户代表,了解他们的痛点、选型考虑和未来展望,集…

第一个动态结构:链表

王有志,一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群:共同富裕的Java人 今天我们一起学习线性表中的第二种数据结构:链表,也是真正意义上的第一个动态数据结构。今天的内容分为3个部分:认识链表&#xff0…