鸿蒙开发-ArkTS 语言-基础语法

1. 初识 ArkTS 语言

ArkTS 是 HarmonyOS 优选主力开发语言。ArkTS 是基于 TypeScript (TS) 扩展的一门语言，继承了 TS 的所有特性，是TS的超集。

主要是扩展了以下几个方面：

  1. 声明式UI描述和自定义组件：

    • ArkTS使用声明式的方式描述用户界面（UI），布局更直观易懂。
    • 可以自定义组件

  2. 多维度的状态管理机制：

    ArkTS可以使用@State、@Prop 等装饰器以及 LocalStorage 等管理应用的状态。

    主要表现在：

    • 支持在组件内使用与UI相关联的数据，实现局部状态管理。
    • 支持在不同组件层级间传递数据，包括父子组件和爷孙组件之间的传递。
    • 全局状态管理允许在应用的整个范围内传递数据，也可以跨设备传递。
    • 提供只读的单向数据传递和可变更的双向数据传递。

  3. 渲染控制的能力：

    ArkTS提供了灵活的渲染控制功能，使开发者能够根据应用的状态动态渲染UI内容。

    主要表现在：

    • 条件渲染（if-else）允许根据不同的应用状态选择性地渲染UI内容。
    • 循环渲染支持从数据源中迭代获取数据，并在每次迭代中创建相应的组件。
    • 数据懒加载允许按需迭代数据，并在每次迭代中创建相应的组件，提高应用性能。

2. 基本语法

2.1 ArkTS的基本组成

概念描述
装饰器用于装饰类、结构、方法以及变量，赋予其特殊含义。例如，@Component 表示自定义组件，@Entry 表示入口组件，@State 表示状态变量。状态变量的变化会触发UI刷新。
UI描述使用声明式的方式描述UI的结构，通常体现在 build() 方法中的代码块。
自定义组件可复用的UI单元，可组合其他组件。被 @Component 装饰的 struct xxx 就是一个自定义组件。
系统组件ArkUI框架中默认内置的基础和容器组件，可以直接调用。 常见系统组件：Column、Text、Divider、Button 。
属性方法组件可以通过链式调用配置多项属性的方法。例如，fontSize()、width()、height()、backgroundColor() 可以用于设置组件的样式和尺寸等属性。
事件方法组件可以通过链式调用设置多个事件的响应逻辑。例如，在 Button 后面的 onClick() 就是一个事件方法，用于处理按钮被点击时的逻辑。

经典案例代码示例：

// 1. 按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新
@Builder function MessageBuilder($$:{message:string}) { // 自定义装饰器Row(){Text(`Message is ${$$.message}`)}
}// 2. 按值传递
@Builder function ValueBuilder(message : string) {Row() {Text(`message is ${message}`)}
}@Entry // 装饰器
@Component // 装饰器
struct Index { // 使用 struct 关键字定义组件@State message: string = 'hello' // @State表示组件中的状态变量，状态变量变化会触发UI刷新@State count: number = 1build() {Row() { // 行Column() { // 列Text(this.message + this.count).fontSize(50)  // 属性方法.fontWeight(FontWeight.Bold)Button('点我试试').onClick(() => {this.count ++this.message = '你好'}).fontColor('#000')MessageBuilder({message: this.message}) // 传递参数的引用ValueBuilder(this.message) // 按值传递，无响应式}.width('100%')}.height('100%')}
}

效果如下：

gif1

2.2 声明式 UI

ArkTS采用声明方式组合和扩展组件来描述应用程序的UI，同时提供了基本的属性、事件和子组件配置方法

1. 创建组件：

  • 无参数创建：对于没有必选构造参数的组件，可以直接在组件后面使用空括号，例如 Divider()。

  • 有参数创建：如果组件包含构造参数，可以在括号内配置相应参数，例如 Text('你好')。

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

2. 配置属性：

  • 使用属性方法通过“.”链式调用配置系统组件的样式和其他属性，建议每个属性方法单独写一行，如设置字体大小、宽度、高度等。

    Text('test').fontSize(12)

3. 配置事件：

  • 通过事件方法以“.”链式调用配置系统组件支持的事件，可使用lambda表达式、匿名函数表达式或组件的成员函数来定义

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

2.3 自定义组件

在ArkUI中，UI显示的内容由组件构成，其中框架直接提供的组件称为系统组件，而开发者定义的组件则被称为自定义组件。

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

  1. 可组合： 允许开发者组合使用系统组件及其属性和方法。

  2. 可重用： 自定义组件可以被其他组件重用，作为不同实例在不同的父组件或容器中使用。

  3. 数据驱动UI更新： 通过状态变量的改变来驱动UI的刷新。

自定义组件的结构：

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

以下示例展示了自定义组件GreetingComponent的基本用法：

@Component
struct GreetingComponent {@State greeting: string = 'Hello, World!';build() {// GreetingComponent自定义组件组合系统组件Row和TextRow() {Text(this.greeting).onClick(() => {// 状态变量greeting的改变驱动UI刷新this.greeting = 'Hello, ArkUI!';});}}
}

GreetingComponent 可以在其他自定义组件的 build() 函数中多次创建，实现自定义组件的重用。

@Entry
@Component
struct ParentComponent {build() {Column() {Text('ArkUI Greetings');GreetingComponent({ greeting: 'Hello, World!' });Divider();GreetingComponent({ greeting: '你好!' });}}
}

成员函数/变量

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

  • 不支持静态函数。
  • 成员函数的访问始终是私有的。

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

  • 不支持静态成员变量。
  • 所有成员变量都是私有的，变量的访问规则与成员函数的访问规则相同。
  • 自定义组件的成员变量本地初始化有些是可选的，有些是必选的。具体是否需要本地初始化，是否需要从父组件通过参数传递初始化子组件的成员变量，请参考官方文档：状态管理。

build()函数

@Entry装饰的自定义组件，必须要有且仅有一个 build() 函数，且必须为容器组件，其中ForEach禁止作为根节点，他会产生多节点。

@Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。

代码示例：

@Entry
@Component
struct MyComponent {build() {// 根节点唯一且必要，必须为容器组件Row() {ChildComponent() }}
}@Component
struct ChildComponent {build() {// 根节点唯一且必要，可为非容器组件Image('test.jpg')}
}

在 build() 函数内，不允许以下几点:

build() {  // 反例：不允许声明本地变量 let a: number = 1;// 反例：不允许console.infoconsole.info('print debug log');// 反例：不允许本地作用域{...}//   不允许switch语法，如果需要使用条件判断，请使用if。反例如下。switch (expression) {case 1:Text('...')break;case 2:Image('...')break;default:Text('...')break;}//  不允许使用表达式，反例如下。(this.aVar > 10) ? Text('...') : Image('...')}

另外：

不允许调用除了被@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())}}
}

2.4 自定义组件通用样式

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

@Component
struct MyComponent2 {build() {Button(`Hello World`)}
}@Entry
@Component
struct MyComponent {build() {Row() {MyComponent2() // 为自定义组件添加通用样式.width(200).height(300).backgroundColor(Color.Red)}}
}

2.5. 页面和自定义组件生命周期

可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

图示：

图片来源：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-page-custom-components-lifecycle-0000001524296665-V2

img01

生命周期接口描述
onPageShow每次页面显示时触发。
onPageHide每次页面隐藏时触发一次。
onBackPress当用户点击返回按钮时触发。
aboutToAppear组件即将出现时回调，具体时机为在创建新实例后，在执行 build() 函数之前执行。
aboutToDisappear在自定义组件即将销毁时执行。

示例代码：

// 包含两个自定义组件，一个是被@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。
// 只有@Entry装饰的节点才可以生效页面的生命周期方法，所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。
import router from '@ohos.router';@Entry
@Component
struct MyComponent {@State showChild: boolean = true;// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');}// 组件生命周期aboutToAppear() {console.info('MyComponent aboutToAppear');}// 组件生命周期aboutToDisappear() {console.info('MyComponent aboutToDisappear');}build() {Column() {// this.showChild为true，创建Child子组件，执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false，删除Child子组件，执行Child aboutToDisappearButton('create or delete Child').onClick(() => {this.showChild = false;})// push到Page2页面，执行onPageHideButton('push to next page').onClick(() => {router.pushUrl({ url: 'pages/Page2' });})}}
}
@Component
struct Child {@State title: string = 'Hello World';// 组件生命周期-在自定义组件即将析构销毁时执行aboutToDisappear() {console.info('[lifeCycle] Child aboutToDisappear')}// 组件生命周期-组件即将出现时回调aboutToAppear() {console.info('[lifeCycle] Child aboutToAppear')}build() {Text(this.title).fontSize(50).onClick(() => {this.title = 'Hello ArkUI';})}
}

2.6. @Builder装饰器：自定义构建函数

定义的语法：

@Builder MyBuilderFunction({ ... })

使用方法：

this.MyBuilderFunction({ ... })
  • 允许在自定义组件内定义一个或多个自定义构建函数，该函数被认为是该组件的私有、特殊类型的成员函数。
  • 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。
  • 在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

示例如下：

@Builder function  GlobalBuilder() {Text('我是全局装饰器')
}@Component
struct Children1 { // 子组件@Builder DoNothing(){}@BuilderParam aBuilder: () => void = this.DoNothing; // 定义局部的装饰器@BuilderParam bBuilder: () => void = GlobalBuilder; // 定义全局的装饰器build(){Column() {GlobalBuilder()}}
}@Component
struct Children2 {@BuilderParam paramsBuilder: () => void; // 声明装饰器build(){Column() {this.paramsBuilder()}}
}@Component
@Entry
struct Index {@Builder componentBuilder() {Text('我是父组件的 builder')}build() {Column() {Children1()Children2({ paramsBuilder: this.componentBuilder}) // 传入一个 builder 给子组件}.width('100%')}
}

img02

尾随闭包初始化组件

在初始化自定义组件时，紧跟一个大括号“{}”形成尾随闭包场景，将尾随闭包内的内容看做@Builder装饰的函数传给@BuilderParam

// 尾随闭包初始化组件
@Component
struct CustomContainer {@Prop header: string;@BuilderParam closer: () => void // 准备接受闭包参数build() {Column() {Text(this.header).fontSize(30)this.closer()}}
}@Builder function specificParam(label1: string, label2: string) {Column() {Text(label1).fontSize(30)Text(label2).fontSize(30)}
}@Entry
@Component
struct Index {@State text: string = 'header';build() {Column() {// 在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包// 用内部的 this.text 作为参数CustomContainer({ header: this.text }) {Column() {specificParam('testA', 'testB')}.backgroundColor(Color.Yellow).onClick(() => {this.text = 'changeHeader';})}}}
}

效果如下：

gif02

2.7 @Styles装饰器：定义组件重用样式

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，可以使用公共样式装饰器@Styles。

使用方法：

// 反例： @Styles不支持参数
// @Styles function globalFancy (value: number) {
//   .width(value)
// }// @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，
// 组件内定义时则不需要添加function关键字。// 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，
// 并可以在@Styles里通过事件来改变状态变量的值// 组件内@Styles的优先级高于全局@Styles。@Component
@Entry
struct Index  {@State heightValue: number = 100@Styles fancy() {.height(this.heightValue).backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200})}build() {Column(){Row(){Text('自定义样式，点我也能改变样式').fancy()}Divider()Row(){Text('点我也一样，也会跟着改变样式').fancy()}}}
}

gif03

2.8 @Extend装饰器：定义扩展组件样式

使用规则

  • 和@Styles不同，@Extend仅支持定义在全局，不支持在组件内部定义。
  • 和@Styles不同，@Extend支持封装指定的组件的私有属性和私有事件，也可以预定义相同组件的@Extend的方法
// 和@Styles不同，@Extend仅支持定义在全局，不支持在组件内部定义。
// 和@Styles不同，@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
// 和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
// @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染
@Extend(Text) function fancy (fontSize: number) { // 只给 Text 继承了 fancy.fontColor(Color.Red).fontSize(fontSize)
}// @Extend装饰的方法的参数可以为function，作为Event事件的句柄。
@Extend(Text) function makeMeClick(onClick: () => void) {.backgroundColor(Color.Blue).onClick(onClick)
}@Entry
@Component
struct Index {@State label: string = 'Hello World';@State fontSizeValue: number = 58;onClickHandler() {this.label = 'Hello ArkUI';this.fontSizeValue = 108}build(){Column(){Row({space: 10}) {Text('测试').fancy(this.fontSizeValue) // 传入可响应数据，后续函数执行，字号也会发生变化// Span('span无效')//   .fancy() // Property 'fancy' does not exist on type 'SpanAttribute'. <tsCheck>}Row({ space: 10 }) {Text(`${this.label}`).makeMeClick(this.onClickHandler.bind(this)) // bind 绑定当前作用域.fancy(109)}}}
}

gif04

2.9 stateStyles：多态样式

// 多态样式
// stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态：
//
// 1. focused：获焦态。
// 2. normal：正常态。
// 3. pressed：按压态。
// 4. disabled：不可用态。// 基础场景
// 下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件，默认获焦，
// 生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。
// 如果在Button前再放一个组件，使其不处于获焦态，就会生效normal态的黄色。// Styles也可和stateStyles联合使用
@Entry
@Component
struct Index {@Styles normalStyle() {.backgroundColor(Color.Gray)}@Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Button('Click me').stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Yellow)}})Column() {Text('Text1').fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}.margin('30%')}
}

gif05
鸿蒙开发-ArkTS 语言-状态管理

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java计算下一个整10分钟时间点

java计算下一个整10分钟时间点

最近工作上遇到需要固定在整10分钟一个周期调度某个任务&#xff0c;所以需要这样一个功能&#xff0c;记录下 package org.example;import com.google.gson.Gson; import org.apache.commons.lang3.time.DateUtils;import java.io.InputStream; import java.util.Calendar; i…
阅读更多...
JWT和Token之间的区别

JWT和Token之间的区别

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…
阅读更多...
鸿蒙开发之android开发人员指南《基础知识》

鸿蒙开发之android开发人员指南《基础知识》

基于华为鸿蒙未来可能不再兼容android应用&#xff0c;推出鸿蒙开发系列文档&#xff0c;帮助android开发人员快速上手鸿蒙应用开发。 1. 鸿蒙使用什么基础语言开发&#xff1f; ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风…
阅读更多...
vcsa6.7 5480无法登录

vcsa6.7 5480无法登录

停电维护硬件后&#xff0c;发现vcsa异常&#xff0c;https://ip:5480无法登录&#xff0c;https://ip/ui正常&#xff0c;ssh登录页正常 kb资料 通过端口 5480 登录到 VMware vCenter Server Appliance Web 控制台失败 (2120477) 操作过程 Connecting to 192.16.20.31:22..…
阅读更多...
跑步运动耳机哪个牌子好？运动型无线耳机排行榜

跑步运动耳机哪个牌子好？运动型无线耳机排行榜

​运动耳机是我们运动时不可或缺的装备&#xff0c;它可以让你享受高品质的音乐&#xff0c;还提供了高舒适佩戴体验以及稳定的连接。然而面对市面上层出不穷的运动耳机&#xff0c;到底哪款更值得入手&#xff1f;今天我为大家推荐几款市面上备受好评的运动耳机&#xff0c;是…
阅读更多...
红队攻防实战系列一之Cobalt Strike

红队攻防实战系列一之Cobalt Strike

他日若遂凌云志&#xff0c;敢笑黄巢不丈夫 本文首发于先知社区&#xff0c;原创作者即是本人 前言 在红队攻防中&#xff0c;需要我们拥有综合能力&#xff0c;不仅仅是web渗透的漏洞挖掘与利用&#xff0c;边界突破的方式有很多种&#xff0c;当然这需要我们拥有很强的意识…
阅读更多...
【Python进阶笔记】md文档笔记第6篇：Python进程和多线程使用（图文和代码）

【Python进阶笔记】md文档笔记第6篇：Python进程和多线程使用（图文和代码）

本文从14大模块展示了python高级用的应用。分别有Linux命令&#xff0c;多任务编程、网络编程、Http协议和静态Web编程、htmlcss、JavaScript、jQuery、MySql数据库的各种用法、python的闭包和装饰器、mini-web框架、正则表达式等相关文章的详细讲述。 全套md格式笔记和代码自…
阅读更多...
yolov5从英伟达平台移植到华为昇腾开发板上的思路

yolov5从英伟达平台移植到华为昇腾开发板上的思路

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 最近需要将yolov5代码从英伟达平台移植到华为昇腾开发板上。搜了一些代码和资料&#xff0c;大致明白了二者的差别。 1.二者使用的模型文件不一样 yolov…
阅读更多...
软件测试职业规划导图

软件测试职业规划导图

公司开发的产品专业性较强&#xff0c;软件测试人员需要有很强的专业知识&#xff0c;现在软件测试人员发展出现了一种测试管理者不愿意看到的景象&#xff1a; 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)&#xff1b; 2、业务能力较强的测试人员转向了软件…
阅读更多...
MFC设置单选按钮点击自己可以可选和不可选

MFC设置单选按钮点击自己可以可选和不可选

mfc是c的一个框架&#xff0c;可谓是经久不衰。最近博主遇到一个问题&#xff0c;就是单选按钮点击自己可以设置可选和不可选&#xff0c;貌似类似复选框一样&#xff0c;但领导分发的任务上要求的是用单选按钮实现复选框这种类似功能&#xff0c;实现效果类似如下图&#xff1…
阅读更多...
TYPE-C、PD原理

TYPE-C、PD原理

一、Type-C简介以及历史 自1998年以来&#xff0c;USB发布至今&#xff0c;USB已经走过20个年头有余了。在这20年间&#xff0c;USB-IF组织发布N种接口状态&#xff0c;包括A口、B口、MINI-A、MINI-B、Micro-A、Micro-B等等接口形态&#xff0c;由于各家产品的喜好不同&#x…
阅读更多...
城市数字孪生优秀案例集 - 城市治理类 - 深圳市城市交通数字孪生建设

城市数字孪生优秀案例集 - 城市治理类 - 深圳市城市交通数字孪生建设

一、背景意义 “十四五”规划、《数字交通发展规划纲要》、《广东省数字经济促进条例》等提出“构建城市数据资源 体系&#xff0c;推进城市数据大脑建设&#xff0c;探索建设数字孪生城市”。 当前&#xff0c;我国 9 亿城市化人口每天出行约 16 亿人 次&#xff0c;主要大城…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023