【OpenHarmony】ArkTS 语法基础 ⑦ ( 声明式 UI 的特征 | 声明式描述 | 状态驱动视图更新 | 创建并使用自定义组件 | 设置组件属性 | 自定义组件配置 | 容器组件设置 )

韩曙亮

发布于 2024-06-07 07:28:45

46300

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍

博客源码 :

一、声明式 UI 的特征

1、声明式 UI 的特征

声明式 UI 的特征 :

声明式描述 : 在 build 函数中 , 描述 UI 组件呈现的结果 ;
状态驱动视图更新 : 通过 @State / @Link 等装饰器定义状态数据 , 在 UI 组件中 , 使用这些状态数据进行数据渲染 , 一旦状态数据改变则重新调用 build 函数进行渲染 ;
- 开发过程中 , 开发者不会直接操作 UI 组件 , 而是通过修改状态数据而改变 UI 组件的渲染状态 ;

2、声明式描述

在下面的 build 函数中 , 描述了 Column 布局组件和 MyComponent 自定义组件 / Text 组件的展示效果 ,

MyComponent 自定义组件和 Text 组件在 Column 布局组件中纵向排列 ;

@Component
struct Example {

  // 父容器中的状态数据
  @State isFatherSelected: boolean = false;
  
  build() {
    // 必须使用布局组件包括子组件
    Column(){
      // 自定义子组件
      MyComponent({isSonSelected: $isFatherSelected});

      // 另外的子组件
      Text('父容器状态 : ' + this.isFatherSelected)
        .fontSize(20)
        .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
        .backgroundColor(Color.Black)
    }
  }

下面的代码中 , 红色矩形框中的内容是声明式描述 ;

3、状态驱动视图更新

" 状态 " 是驱动 UI 视图变化的数据源 , 一般是由 @State 装饰器装饰的变量 ;

UI 视图在渲染时 , 使用了该状态变量 , 则该视图就与该状态进行了关联绑定 , 当状态数据发生改变时 , 视图也会进行刷新重新渲染 ;

在上述自定义组件中 , 定义了 @State isFatherSelected: boolean 状态数据 ,

  @State isFatherSelected: boolean = false;

在 Text 组件中 , 使用了该状态数据进行了渲染 ,

如果 isFatherSelected 值为 true , 则将文本颜色设置为黄色 ;
如果 isFatherSelected 值为 false , 则将文本颜色设置为白色 ;

      // 另外的子组件
      Text('父容器状态 : ' + this.isFatherSelected)
        .fontSize(20)
        .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
        .backgroundColor(Color.Black)

4、完整代码

上面讲解的代码的完整代码如下 :

// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';

@Entry
@Component
struct Example {

  // 父容器中的状态数据
  @State isFatherSelected: boolean = false;

  aboutToAppear(){
    console.log("HSL Example aboutToAppear")
  }

  onPageShow() {
    console.log("HSL Example onPageShow")
  }

  onBackPress() {
    console.log("HSL Example onBackPress")
  }

  build() {
    // 必须使用布局组件包括子组件
    Column(){
      // 自定义子组件
      MyComponent({isSonSelected: $isFatherSelected});

      // 另外的子组件
      Text('父容器状态 : ' + this.isFatherSelected)
        .fontSize(20)
        .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
        .backgroundColor(Color.Black)
    }
  }

  onPageHide() {
    console.log("HSL Example onPageHide")
  }

  aboutToDisappear(){
    console.log("HSL Example aboutToDisappear")
  }

}

二、创建并使用自定义组件

1、自定义组件定义

自定义组件概念 : 通过将

OpenHarmony 系统内置的基础组件 ,
其它自定义组件 ,

封装起来 , 得到一个可重用的 , 可与其它组件组合使用的 UI 单元 , 这就是自定义组件 ;

自定义组件 , 一般使用 @Component 装饰器进行装饰 ;

@Component
export struct MyComponent {

2、自定义组件声明

定义完自定义组件 A 之后 , 还需要在使用该自定义组件的 " 另外的自定义组件 B " 中的 build() 渲染函数中的某个布局组件中 , 调用自定义组件 A 的构造函数声明该组件 ;

build() 函数是进行 " 声明式 UI 描述 " 的位置 ;

一个布局组件中 , 使用大括号描述该布局组件中有哪些子组件 , 在布局组件构造函数后的大括号中 , 声明其它组件 , 就是将被声明的组件 , 放入了布局组件中 ;

代码示例 : 在 Example 组件中 , 使用 MyComponent 自定义组件 ;

@Component
struct Example {
  build() {
    // 必须使用布局组件包括子组件
    Column(){
      // 自定义子组件
      MyComponent({isSonSelected: $isFatherSelected});

      // 另外的子组件
      Text('父容器状态 : ' + this.isFatherSelected)
        .fontSize(20)
        .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
        .backgroundColor(Color.Black)
    }
  }

三、设置组件属性

1、自定义组件配置

在 ArkTS 中 , 支持使用 . 运算符的方式 , 设置组件的属性 ,

具体的属性参考 , 可以查询 DevEco Studio 的 API 参考文档 ;

设置 Text 文本组件的一系列属性 ,

// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
  .backgroundColor(Color.Black)

在 API 参考窗口中 , 可以查看要设置哪些属性 ;

2、容器组件设置

容器组件是用于描述多个组件之间的布局关系的组件 , 又称为 " 布局组件 " ;

容器组件可以在 OpenHarmony 的 ArkTS 组件的容器组件下面查询 , 下面 API 参考窗口中 , 显示的是 Column 容器组件的属性 ;

在下面的布局声明中 , Column 布局组件中 , 放置了 2 个子组件 , 上下排列 ;

  build() {
    // 必须使用布局组件包括子组件
    Column(){
      // 自定义子组件
      MyComponent({isSonSelected: $isFatherSelected});

      // 另外的子组件
      Text('父容器状态 : ' + this.isFatherSelected)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
        .backgroundColor(Color.Black)
    }
  }