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

John Rivers

已于 2023-11-28 00:23:38 修改

阅读量5.4k

点赞数 29

分类专栏：鸿蒙文章标签： harmonyos 华为

于 2023-11-25 11:23:51 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66492535/article/details/134612161

版权

[写在前面: 文章多处用到gif动图，如未自动播放，请点击图片]

1. 初识 ArkTS 语言

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

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

声明式UI描述和自定义组件：
- ArkTS使用声明式的方式描述用户界面（UI），布局更直观易懂。
- 可以自定义组件
多维度的状态管理机制：

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

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

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 = 1
  build() {
   
    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显示的内容由组件构成，其中框架直接提供的组件称为系统组件，而开发者定义的组件则被称为自定义组件。

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

可组合： 允许开发者组合使用系统组件及其属性和方法。
可重用： 自定义组件可以被其他组件重用，作为不同实例在不同的父组件或容器中使用。
数据驱动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和Text
    Row() {
   
      Tex