OpenHarmony自定义组件介绍

news2024/11/24 19:29:22

一、创建自定义组件

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

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

  • 可组合：允许开发者组合使用系统组件、及其属性和方法。
  • 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

以下示例展示了自定义组件的基本用法。

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

HelloComponent可以在其他自定义组件中的build()函数中多次创建，实现自定义组件的重用。

class HelloComponentParam {
  message: string = ""
}

@Entry
@Component
struct ParentComponent {
  param: HelloComponentParam = {
    message: 'Hello, World!'
  }

  build() {
    Column() {
      Text('ArkUI message')
      HelloComponent(param);
      Divider()
      HelloComponent(param);
    }
  }
}

要完全理解上面的示例，需要了解自定义组件的以下概念定义，本文将在后面的小节中介绍：

  • 自定义组件的基本结构
  • 成员函数/变量
  • 自定义组件的参数规定
  • build()函数
  • 自定义组件通用样式

自定义组件的基本结构

  • struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

说明：自定义组件名、类名、函数名不能和系统组件名相同。

  • @Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。

说明：从API version 9开始，该装饰器支持在ArkTS卡片中使用。

@Component
struct MyComponent {
}
  • build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
@Component
struct MyComponent {
  build() {
  }
}
  • @Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。@Entry可以接受一个可选的LocalStorage的参数。

说明：

从API version 9开始，该装饰器支持在ArkTS卡片中使用。

从API version 10开始，@Entry可以接受一个可选的LocalStorage的参数或者一个可选的EntryOptions参数。

@Entry
@Component
struct MyComponent {
}

EntryOptions10+命名路由跳转选项。

名称

类型

必填

说明

routeName

string

否

表示作为命名路由页面的名字。

storage

LocalStorage

否

页面级的UI状态存储。

@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}
  • @Reusable：@Reusable装饰的自定义组件具备可复用能力

说明：

从API version 10开始，该装饰器支持在ArkTS卡片中使用。

@Reusable
@Component
struct MyComponent {
}

成员函数/变量

自定义组件除了必须要实现build()函数外，还可以实现其他成员函数，成员函数具有以下约束：

  • 不支持静态函数。
  • 成员函数的访问始终是私有的。

自定义组件可以包含成员变量，成员变量具有以下约束：

  • 不支持静态成员变量。
  • 所有成员变量都是私有的，变量的访问规则与成员函数的访问规则相同。
  • 自定义组件的成员变量本地初始化有些是可选的，有些是必选的。具体是否需要本地初始化，是否需要从父组件通过参数传递初始化子组件的成员变量，请参考状态管理。

自定义组件的参数规定

从上文的示例中，我们已经了解到，可以在build方法或者@Builder装饰的函数里创建自定义组件，在创建的过程中，参数可以被提供给组件。

@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}

build()函数

所有声明在build()函数的语言，我们统称为UI描述语言，UI描述语言需要遵循以下规则：

  • @Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件，其中ForEach禁止作为根节点。 @Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。
@Entry
@Component
struct MyComponent {
  build() {
    // 根节点唯一且必要，必须为容器组件
    Row() {
      ChildComponent() 
    }
  }
}

@Component
struct ChildComponent {
  build() {
    // 根节点唯一且必要，可为非容器组件
    Image('test.jpg')
  }
}
  • 不允许声明本地变量，反例如下。
build() {
  // 反例：不允许声明本地变量
  let a: number = 1;
}
  • 不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用，反例如下。
build() {
  // 反例：不允许console.info
  console.info('print debug log');
}
  • 不允许创建本地的作用域，反例如下。
build() {
  // 反例：不允许本地作用域
  {
    ...
  }
}
  • 不允许调用除了被@Builder装饰以外的方法，允许系统组件的参数是TS方法的返回值。
@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例：不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例：可以调用
      this.doSomeRender();
      // 正例：参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}
  • 不允许使用switch语法，如果需要使用条件判断，请使用if。反例如下。
build() {
  Column() {
    // 反例：不允许使用switch语法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}
  • 不允许使用表达式，反例如下。
build() {
  Column() {
    // 反例：不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

自定义组件通用样式

自定义组件通过“.”链式调用的形式设置通用样式。

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

说明：

ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。

二、页面和自定义组件生命周期

在开始之前，我们先明确自定义组件和页面的关系：

  • 自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
  • 页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

  • onPageShow：页面每次显示时触发。
  • onPageHide：页面每次隐藏时触发一次。
  • onBackPress：当用户点击返回按钮时触发。

组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

  • aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
  • aboutToDisappear：在自定义组件即将析构销毁时执行。

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件（首页）生命周期。

根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。

自定义组件的创建和渲染流程

  1. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
  2. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
  3. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
  4. 在首次渲染的时候，执行build方法渲染系统组件，如果有自定义子组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：
    1. 状态变量 -> UI组件（包括ForEach和if）。
    2. UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。
build() {
  ...
  this.observeComponentCreation(() => {
    Button.create();
  })

  this.observeComponentCreation(() => {
    Text.create();
  })
  ...
}

当应用在后台启动时，此时应用进程并没有销毁，所以仅需要执行onPageShow。

自定义组件重新渲染

当事件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：

  1. 框架观察到了变化，将启动重新渲染。
  2. 根据框架持有的两个map（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。

自定义组件的删除

如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除：

  1. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，当前端节点已经没有引用时，将被JS虚拟机垃圾回收。
  2. 自定义组件和它的变量将被删除，如果其有同步的变量，比如@Link、@Prop、@StorageLink，将从同步源上取消注册。

不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

以下示例展示了生命周期的调用时机：

// Index.ets
import router from '@ohos.router';

@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }

  // 组件生命周期
  aboutToAppear() {
    console.info('MyComponent aboutToAppear');
  }

  // 组件生命周期
  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    Column() {
      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
      Button('delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2页面，执行onPageHide
      Button('push to next page')
        .onClick(() => {
          router.pushUrl({ url: 'pages/Page2' });
        })
    }

  }
}

@Component
struct Child {
  @State title: string = 'Hello World';
  // 组件生命周期
  aboutToDisappear() {
    console.info('[lifeCycle] Child aboutToDisappear')
  }
  // 组件生命周期
  aboutToAppear() {
    console.info('[lifeCycle] Child aboutToAppear')
  }

  build() {
    Text(this.title).fontSize(50).onClick(() => {
      this.title = 'Hello ArkUI';
    })
  }
}

以上示例中，Index页面包含两个自定义组件，一个是被@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。只有@Entry装饰的节点才可以生效页面的生命周期方法，所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时声明了组件的生命周期函数。

  • 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
  • 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
  • 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
  • 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。
  • 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。
  • 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。
  • 退出应用，执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1049896.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

四、YApi的安装和配置

四、YApi的安装和配置

YApi是去哪儿网的前端技术中心的一个开源可视化接口管理平台。 创建接口项目 创建接口 编写接口
阅读更多...
中文读唇总动员：CNVSRC 2023 视觉语音识别挑战赛启动

中文读唇总动员：CNVSRC 2023 视觉语音识别挑战赛启动

由 NCMMSC 2023 组委会发起，清华大学、北京邮电大学、海天瑞声、语音之家共同主办的 CNVSRC 2023 中文连续视觉语音识别挑战赛即日启动，诚邀参与报名。 赛事官网：http://cnceleb.org/competition 视觉语音识别，也称唇语识别&…
阅读更多...
为什么我的Windows 10笔记本电脑明明什么软件都没开，风扇却一直在转？

为什么我的Windows 10笔记本电脑明明什么软件都没开，风扇却一直在转？

2023年9月29日，周五上午 这两天我的笔记本电脑一开机，风扇就一直在转，而且还没停过，挺吵的 即使什么软件都没开，还在那转，莫名其妙的。 后来我去任务管理器按照CPU使用情况来排序，发现原来是W…
阅读更多...
如何自动转发接收的请求报头？

如何自动转发接收的请求报头？

了解OpenTelemetry的朋友应该知道，为了将率属于同一个请求的多个操作（Span）串起来，上游应用会生成一个唯一的TraceId。在进行跨应用的Web调用时，这个TraceId和代表跟踪操作标识的SpanID一并发给目标应用，W3…
阅读更多...
经过认证的工具链对安全关键型应用意味着什么？

经过认证的工具链对安全关键型应用意味着什么？

作者：IAR 安全关键型应用，在很多人看来是个专业的词汇，但其实它离我们的日常生活很近，比如汽车驾驶系统、飞机控制系统、电梯运行系统、医疗设备等与我们息息相关的事物都可以纳入安全关键型应用的范畴。 对于这类应用&#xff…
阅读更多...
SAP入门到放弃系列之QM检验计划-Part1

SAP入门到放弃系列之QM检验计划-Part1

文章目录 一、概述1.1、检验计划抬头1.2、检验计划工序 二、系统操作2.1、测试数据准备：2.2、创建检验计划 一、概述 检验计划是用来描述如何对一种或多种物料进行质量检验操作的主数据。在检验计划中，可以定义检验的工序顺序以及可用于检验特征的数据规…
阅读更多...
排序：归并（Merge）排序算法分析

排序：归并（Merge）排序算法分析

1.归并操作 归并:把两个或多个已经有序的序列合并成一个。 2路归并：二合一k路归并：k合一结论:m路归并，每选出一个元素需要对比关键字m-1次。 2.算法思想 核心操作:把数组内的两个有序序列归并为一个。 例如： 3.代码实现 将…
阅读更多...
数据集笔记： Porto

数据集笔记： Porto

数据来源：Taxi Trajectory Data_数据集-阿里云天池 (aliyun.com) 1 数据介绍 葡萄牙波尔图市运行的所有442辆出租车的全年轨迹（从2013年7月1日至2014年6月30日） 2 读取数据 import pandas as pdtrapd.read_csv(C:/Users/16000/Download…
阅读更多...
C语言中动态内存管理

C语言中动态内存管理

前言：为什么存在动态内存分配，为什么要用动态内存分配，动态内存分配的意义。鸡汤：有了坚持不一定成功,但没有坚持，就注定失败，各位也要努力坚持提升自己！ 动态内存分配 动态内存函数&#xff1a…
阅读更多...
【Linux】 du 命令使用

【Linux】 du 命令使用

问题 No space left on device 请求接口返回 java.io.IOException: No space left on device 设备上没有剩余空间 怎么解决问题： 查看这篇文章：一次 linux 服务器磁盘使用情况排查 我们提到命令：du -sh * 到底这个命令是干什么的咱们…
阅读更多...
EXPLAIN 语句输出的各个列解释

EXPLAIN 语句输出的各个列解释

title: “EXPLAIN 语句输出的各个列解释” createTime: 2022-03-06T15:52:4108:00 updateTime: 2022-03-06T15:52:4108:00 draft: false author: “ggball” tags: [“mysql”] categories: [“db”] description: “” EXPLAIN 语句输出的各个列解释 列名描述id在一个大的查…
阅读更多...
多线程(基础)

多线程(基础)

文章目录 1. 线程的声明周期1.1 JDK 中用 Thread.State 枚举表示了线程的几种状态1.2 线程状态转换图 2. 线程的同步2.1 Synchronized 线程同步机制 3. 互斥锁3.1 注意事项和细节3.2 守护线程 setDaemon()方法 4. 线程的死锁5. 释放锁6. 课后练习 1. 线程的声明周期 1.1 JDK 中…
阅读更多...
四通道信息融合下的齿轮箱故障诊断（Python代码，SVM模型和CNN模型进行对比实验，解压缩即可运行，有详细中文注释）

四通道信息融合下的齿轮箱故障诊断（Python代码，SVM模型和CNN模型进行对比实验，解压缩即可运行，有详细中文注释）

1.效果运行视频：四通道信息融合下的齿轮箱故障诊断（Python代码，SVM模型和CNN模型进行对比实验）_哔哩哔哩_bilibili 用到的库： 2.数据集介绍：数据免费下载链接（不要积分）&#xff1a…
阅读更多...
什么是跨站请求伪造（CSRF）攻击？如何防止它？

什么是跨站请求伪造（CSRF）攻击？如何防止它？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是跨站请求伪造（CSRF）攻击？⭐ 如何防止CSRF攻击？⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦…
阅读更多...
xxl-job 2.2之后版本高版本executor未授权访问漏洞

xxl-job 2.2之后版本高版本executor未授权访问漏洞

xxl-job 低版本executor未授权访问 低版本的executor未授权访问漏洞是 POST /run HTTP/1.1 Host: your-ip:9999 Accept-Encoding: gzip, deflate Accept: */* Accept-Language: en User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like G…
阅读更多...
26663-2011 大型液压安全联轴器 课堂随笔

26663-2011 大型液压安全联轴器 课堂随笔

声明 本文是学习GB-T 26663-2011 大型液压安全联轴器. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了大型液压安全联轴器的分类、技术要求、试验方法及检验规则等。 本标准适用于联接两同轴线的传动轴系，可起到限制…
阅读更多...
基于Linux 系统聊天室登录与注册实现（03）

基于Linux 系统聊天室登录与注册实现（03）

上一篇我们已经讲了如何搭建一个多线程的服务器模型，可以支持多个客户端同时连接服务器，本篇我们来实现多个客户端，如何实现向服务器注册信息，并实现登录的功能。 数据结构 接着上一篇的实例代码继续增加功能。要实现注册和登录…
阅读更多...
（Java）关于easyExcel合并单元格

（Java）关于easyExcel合并单元格

今天过客遇到一个需要合并单元格的业务，但是之前过客用的一直是easyExcel框架，所以这次也不想去使用其他的框架，今天就跟大家讲讲easyExcel怎么进行单元格的合并。 首先使用easyExcel进行导出的实体类一样是依据之前那样写，之后在…
阅读更多...
宠物玩具在欧洲销售CE认证EN71测试标准

宠物玩具在欧洲销售CE认证EN71测试标准

CE认证的EN71测试宠物玩具办理： 宠物玩具是用来给宠物玩耍，基于将宠物作为人类伙伴关系而诞生的一种玩具类型，这种玩具的存在就是让人类和自己的宠物真正的互动起来，在情感上面得到更大的交流和互动。 那么宠物玩具出口到欧盟市场…
阅读更多...
支付宝电脑网站支付，异步通知

支付宝电脑网站支付，异步通知

一：异步通知是支付宝回调商户的服务器，所以这个地址需要通过外网访问，在真实项目中都会有对应的服务器，但是在测试中只有使用内网穿透工具 推荐使用NATAPP-内网穿透 基于ngrok的国内高速内网映射工具 配置好内网穿透之后不要忘记…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023