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

参考文档 : <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)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

3、状态驱动视图更新

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

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

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

  @State isFatherSelected: boolean = false;
1

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

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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

---

1、自定义组件定义

自定义组件概念 : 通过将

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

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

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

@Component
export struct MyComponent {
1
2

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、设置组件属性

---

1、自定义组件配置

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

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

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

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

在 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)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14