文章目录

尚硅谷视频学习笔记

Typescript语法的基础可查看文章 《ts快速入门》

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

一、声明式UI

声明式UI是一种编写用户界面的范式。

下面通过一个具体案例来学习这种开发范式。

1、定义界面状态

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

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

@State isOn: boolean = false;

2、描述界面显示效果

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

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

在这里插入图片描述

3、改变状态

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

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

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

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

在这里插入图片描述

4、总结

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

  • 声明式描述 ：开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。
  • 状态数据驱动界面更新：开发者只需修改状态变量的值，界面就会自动更新。

二、组件化

在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程。

ArkTS提供了很多的内置组件，例如：Text、Button、Image等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。

三、入门案例

  • 效果图

在这里插入图片描述

  • 完整代码
@Entry
@Component
struct LightPage {
  @State isOn: boolean = false;

  build() {
    Column({ space: 20 }) {
      if (this.isOn) {
        Image('pages/helloworld/light/practice/images/img_light.png')
          .height(300)
          .width(300)
      } else {
        Image('pages/helloworld/light/practice/images/img_dark.png')
          .height(300)
          .width(300)
      }

      Row() {
        Button('关灯')
          .onClick(() => {
            this.isOn = false;
          })
        Button('开灯')
          .onClick(() => {
            this.isOn = true;
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

四、语法说明

1、声明组件

  • 效果
    在这里插入图片描述
  • 声明组件的完整语法如下图所示

在这里插入图片描述

（1）组件参数

如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下：

○ 首先将鼠标在相应组件悬停

在这里插入图片描述

○ 点击Show in API Reference，就会弹出 API 文档

在这里插入图片描述

（2）子组件

  • 如果组件支持子组件配置，可在()后的{}中添加子组件，如前面代码中的Button组件中添加了Image组件。
  • 若不支持子组件，则不需要写{}。如前面代码中的Image组件。

（3）属性方法

属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。

在这里插入图片描述

（4）事件方法

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

2、自定义组件

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

（1）语法说明

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

在这里插入图片描述

各部分语法说明如下：

● struct关键字
struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。

● build方法
build()方法用于声明自定义组件的UI结构。

● 组件属性
组件属性可用作自定义组件的参数，使得自定义组件更为通用。

● @Compnent装饰器
@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。
注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。

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

在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构。我们前边所编写的每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。

（2）案例实操

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

在这里插入图片描述

  • Light.ets
  • import导入自定义组件SwitchButton并在页面中引用
import { SwitchButton } from './SwitchButton';
@Entry
@Component
struct HelloWorldPage {
  @State isOn: boolean = false;

  build() {
    Column({ space: 20 }) {
      if (this.isOn) {
        Image('pages/helloworld/custom/practice/images/img_light.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      } else {
        Image('pages/helloworld/custom/practice/images/img_dark.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      }
      Row({ space: 50 }) {
        SwitchButton({ color: Color.Red })
          .onClick(() => {
            this.isOn = false
          })

        SwitchButton()
          .onClick(() => {
            this.isOn = true;
          })
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}
  • SwitchButton.ets
  • color 为自定义属性，通过传参进行改变
@Component
export struct SwitchButton {
  color: Color = Color.Green;

  build() {
    Button({ type: ButtonType.Circle }) {
      Image('pages/helloworld/custom/practice/images/icon_switch.png')
        .width(30)
        .height(30)
    }
    .width(50)
    .height(50)
    .backgroundColor(this.color)
  }
}

3、渲染控制

（1）条件渲染

  • 条件渲染可根据应用的不同状态渲染不同的UI界面，例如前文的开/关灯案例
  • 语法如下
if (...){
  //UI描述 
}else if (...){
  //UI描述
}else{
  //UI描述
}

 if (this.isOn) {
        Image('pages/helloworld/custom/practice/images/img_light.png')
          .height(300)
          .width(300)
          .borderRadius(20)
} else {
        Image('pages/helloworld/custom/practice/images/img_dark.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      }
}

（2）循环渲染

  • 循环渲染可使用ForEach语句基于一个数组来快速渲染一个组件列表。
  • 语法如下
ForEach(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
)

各参数的含义如下

  • arr：需要进行循环渲染的数据源，必须为数组类型
@State options: string[] = ["苹果", "桃子", "香蕉", "橘子"];

  • itemGenerator：组件生成函数，用于为arr数组中的每个元素创建对应的组件。该函数可接收两个参数，分别是

    ○ item：arr数组中的数据项
    ○ index（可选）：arr数组中的数据项的索引

(item: string) => {
        Button(item)
          .width(100)
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.answer = item;
          })
      }
  • keyGenerator（可选）：key生成函数，用于为arr数组中的每个数据项生成唯一的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))
}
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

ArkTS原生孕周计算器应用 - 基于胎儿发育展示的孕期管理助手

avatar HarmonyOS开发者社区
cover

【共创季稿事节】鸿蒙ArkTS布局深度解析Flex与ColumnRow的区别与实践

avatar HarmonyOS开发者社区
cover

HarmonyOS厨房计时器应用 - 基于快速预设方案的厨房工具应用

avatar HarmonyOS开发者社区