【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门

简介: 【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门



一、ArkTS 快速入门

ArkTS 在继承了Typescript语法的基础上,主要扩展了声明式UI开发相关的能力。

1.1 声明式UI

声明式UI是一种编写用户界面的范式。下面通过一个具体案例来学习这种开发范式,假如现在要实现如下界面

1.1.1 定义界面状态

按照声明式UI的开发范式,首先需要分析和定义页面的各种状态,并声明相应的状态变量用于表示不同的状态。

当前案例中,界面共有两个状态,分别是开灯和关灯 状态,所以我们可以使用一个boolean类型的变量来表示这两个状态,true表示开灯false表示关灯。如下:

@State isOn: boolean = false;

说明:@State用于声明该变量为状态变量。

1.1.2 描述界面显示效果

在分析完界面状态后,我们需要准确的描述界面在不同状态下的显示效果。

在当前案例中,具体逻辑如下图所示

1.1.3 改变状态

在明确了界面在不同状态下的显示效果后,我们只需修改状态变量的值,就能触发界面的更新。

在当前案例中,若我们将isOn的值改为true,那么界面上就会显示开灯的图片,否则就会显示关灯的图片。

为了实现点击按钮开/关灯的效果,我们可以为按钮绑定点击事件:

● 当用户点击开灯按钮时,我们就将isOn的值改为true。
 ● 当用于点击关灯按钮时,我们就将isOn的值改为false。

1.1.4 总结

以上就是声明式UI开发范式的大致流程,下面为大家总结一下声明式UI的核心思想

声明式描述

开发者只需描述在界面在不同状态下要呈现的最终效果,而无需关注界面变化的具体过程。

状态数据驱动界面更新

开发者只需修改状态变量的值,界面就会自动更新。

2.1 组件化

在鸿蒙开发中,组件是构成界面的最小单元,我们所看到的界面,都是由众多组件组合而成的,所以编写界面其实就是组合组件的过程,ArkTS提供了很多的内置组件,例如:TextButtonImage等等;并且ArkTS还支持自定义组件,让开发者可根据具体需求自定义组件中的内容。

3.1 入门案例

3.1.1 案例效果

案例的最终效果如下图所示

3.1.2 完整代码

案例的完整代码见Demos/entry/src/main/ets/pages/helloworld/light/solution/Light.ets

@Entry
@Component
struct LightPage {
  @State isOn: boolean = false;
  build() {
    Column({ space: 20 }) {
      if (this.isOn) {
        Image('pages/helloworld/light/solution/images/img_light.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      } else {
        Image('pages/helloworld/light/solution/images/img_dark.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      }
      Row({ space: 50 }) {
        Button('关灯')
          .onClick(() => {
            this.isOn = false
          })
        Button('开灯')
          .onClick(() => {
            this.isOn = true;
          })
      }
    }
    .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
  }
}

4.1 语法说明

4.1.1 声明组件

下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法,案例的最终效果如下,完整代码见Demos/entry/src/main/ets/pages/helloworld/delete/DeleteButton.ets

声明组件的完整语法如下图所示

各部分语法说明如下

  • 组件参数如果组件的定义包含参数,可在组件名称后面的()中配置相应参数。各组件支持的参数,可查看API文档,查看方式如下
  • 首先将鼠标在相应组件悬停
  • 点击Show in API Reference,就会弹出 API 文档
  • 子组件
    如果组件支持子组件配置,可在()后的{}中添加子组件,若不支持子组件,则不需要写{}。
  • 属性方法
    属性方法用于配置组件的样式和其他属性,可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档,除去每个组件的专有属性,还有各组件都能配置的通用属性,通用属性也可通过 API 文档查看。

  • 事件方法
    事件方法用于为组件绑定交互事件,可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档,除去每个组件的专有事件,还有各组件都支持的通用事件,通用事件也可通过 API 文档查看。

4.1.2 自定义组件

除去系统预置的组件外,ArkTS 还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。

语法说明

自定义组件的语法如下图所示

各部分语法说明如下:

struct关键字

  • structArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似,可包含属性和方法。
    build方法
  • build()方法用于声明自定义组件的UI结构。
    组件属性
    组件属性可用作自定义组件的参数,使得自定义组件更为通用。
  • @Compnent装饰器

@Component装饰器用于装饰struct关键字声明的数据结构。struct@Component装饰后才具备组件化的能力。

注: 装饰器是Typescript中的一种特殊语法,常用于装饰类、方法、属性,用于修改或扩展其原有的行为。

在学完自定义组件的语法之后,我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比,前边的每个案例还会多出一个@Entry装饰器,那@Entry的作用又是啥呢?

在鸿蒙应用中,每个页面都是由一些列组件组合而成的,并且这些组件都是逐层嵌套的,因此这些组件最终形成了一个组件树的结构,如下图所示

我们前边所编写的每个页面就相当于是组件树的根节点,而@Entry装饰器的作用就是标识该组件为组件树的根节点,也就是一个页面的入口组件。

案例实操

现在需要对前文的开/关灯的案例做出如下改造,由于两个按钮的结构十分相似,所以可考虑自定义一个按钮组件,然后进行复用。

案例的完整代码见:Demos/entry/src/main/ets/pages/helloworld/custom/solution/Light.ets

4.1.3 渲染控制

条件渲染

概述 :条件渲染可根据应用的不同状态渲染不同的UI界面,例如前文的开/关灯案例,以及以下的播放/暂停案例,均可使用条件渲染实现。

案例的完整代码见:Demos/entry/src/main/ets/pages/helloworld/condition/solution/PlayAndPausePage.ets

语法说明

条件渲染的语法如下

if (...){
  //UI描述 
}else if (...){
  //UI描述
}else{
  //UI描述
}

4.1.4 循环渲染

概述

循环渲染可使用ForEach语句基于一个数组来快速渲染一个组件列表,例如以下案例中的选项列表就可通过循环渲染实现。

案例的完整代码见:Demos/entry/src/main/ets/pages/helloworld/foreach/solution/FruitPage.ets

语法说明

ForEach循环渲染的语法如下

各参数的含义如下

ForEach(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
)
  • arr
    需要进行循环渲染的数据源,必须为数组类型,例如上述案例中的
@State options: string[] = ["苹果", "桃子", "香蕉", "橘子"];
  • itemGenerator组件生成函数,用于为arr数组中的每个元素创建对应的组件。该函数可接收两个参数,分别是
  • itemarr数组中的数据项
  • index(可选):arr数组中的数据项的索引

例如上述案例中的

(item: string) => {
        Button(item)
          .width(100)
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.answer = item;
          })
      }

keyGenerator(可选):

key生成函数,用于为arr数组中的每个数据项生成唯一的key

key的作用

ForEach在数组发生变化(修改数组元素或者向数组增加或删除元素)时,需要重新渲染组件列表,在重新渲染时,它会尽量复用原来的组件对象,而不是为每个元素都重新创建组件对象。key的作用就是辅助ForEach完成组件对象的复用。

具体逻辑如下:

ForEach在进行初次渲染时,会使用keyGenerator为数组中的每个元素生成一个唯一的key,并将key作为组件对象的标识。当数组发生变化导致ForEach需要重新渲染时,ForEach会再次使用keyGenerator为每个元素重新生成一遍key,然后ForEach会检查新生成的key在上次渲染时是否已经存在,若存在,ForEach就会认为这个key对应的数组元素没有发生变化,那它就会直接复用这个key所对应的组件对象;若不存在,ForEach就会认为这个key对应的元素发生了变化,或者该元素为新增元素,此时,就会为该元素重新创建一个组件对象。

开发者可以通过keyGenerator函数自定义key的生成规则。如果开发者没有定义keyGenerator函数,则系统会使用默认的key生成函数,即

(item: any, index: number) => { return index + '__' + JSON.stringify(item); }

在某些情况下默认的key生成函数,会导致界面渲染效率低下,此时可考虑通过keyGenerator函数自定义生成逻辑,例如如下场景

状态变量数组定义如下

@State arr:string[] = ["zhangsan","lisi","wangwu"]

ForEach语句如下

Column(){
  ForEach(this.arr,(item)=>{ Text(item) })
}

初次渲染时,每个元素对应的key依次为0__"zhagnsan"、1__"lisi"、2__"wangwu"。若现有一个操作是向arr数组头部插入新的元素,例如新元素为wanger,按照默认的key生成逻辑,插入新元素之后每个元素的key就会依次变为0__"wanger"、1__"zhagnsan"、2__"lisi"、3__"wangwu",也就是所有元素的key都发生了变化,因此UI界面更新时需要为每个元素都重新创建组件对象,即便原有的元素没有发生变化也无法复用之前的组件,这样一来就导致了性能浪费。此时我们就可以考虑提供第三个参数,如下

Column(){
  ForEach(this.arr, (item)=>{ Text(item) }, item => JSON.stringify(item))
}



欢迎添加微信,加入我的核心小队,请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

目录
相关文章
|
2月前
|
程序员 开发者
纯血鸿蒙来画龙!基于HarmonyOS ArkTS来操作SVG图片
大家好,龙年报喜,大地回春,作为程序员,以代码之名,表达对于龙年的祝福。本节将演示如何在基于HarmonyOS ArkTS的Image组件来实现画一条中国龙,祝大家“码”上“鸿”福到!
38 0
|
2月前
|
存储 移动开发 Android开发
HarmonyOS应用开发者高级认证(88分答案)
HarmonyOS应用开发者高级认证(88分答案)
514 0
|
2月前
|
JavaScript 前端开发 开发者
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
55 0
|
8天前
|
存储 JSON JavaScript
HarmonyOS应用开发者基础认证 模拟考试 题库
HarmonyOS应用开发者基础认证 模拟考试 题库
13 0
|
1月前
|
安全 IDE 开发工具
HarmonyOS的功能及场景应用
一、基本介绍 鸿蒙HarmonyOS主要应用的设备包括智慧屏、平板、手表、智能音箱、IoT设备等。具体来说,鸿蒙系统是一款面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,通过同一套系统能力、适配多种终端形态。 二、应用HarmonyOS的设备 1、智能手机: HarmonyOS用于华为的智能手机,旨在提供更流畅的用户体验和更好的多设备协同功能。 2、平板电脑: 华为的平板电脑也可以运行HarmonyOS,使用户可以在不同设备之间共享应用和数据。 3、智能电视: HarmonyOS用于智能电视,提供智能家
32 0
|
2月前
|
存储 JavaScript 前端开发
HarmonyOS应用开发者基础认证考试(95分答案)
HarmonyOS应用开发者基础认证考试(95分答案)
295 0
|
JavaScript Java API
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
333 0
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
|
8月前
|
IDE JavaScript API
HarmonyOS开发第一步,熟知开发工具DevEco Studio
本文主要以常见的功能点作为概述希望可以帮助到学习HarmonyOS的开发者。
214 0
|
3月前
|
数据管理 API 调度
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
200 0
|
3月前
|
前端开发 JavaScript 开发者
鸿蒙2.0!用 JavaScript 开发鸿蒙应用
鸿蒙2.0!用 JavaScript 开发鸿蒙应用