鸿蒙开发-UI-组件

系列文章目录

鸿蒙开发-序言

鸿蒙开发-工具

鸿蒙开发-初体验

鸿蒙开发-运行机制

鸿蒙开发-运行机制-Stage模型

鸿蒙开发-UI

文章目录

前言

一、自定义组件

1.自定义组件基本结构

2.自定义组件参数

3.build()函数

4.自定义组件的通用样式

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

1.页面

2.组件生命周期

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

4.自定义组件的生命周期实例

总结

---

前言

上文我们学习了解了鸿蒙UI开发基于ArkTS声明式开发方式，了解了ArkUI框架对鸿蒙UI开发的底层支撑，后面我们专注基于ArkTS声明式的鸿蒙UI开发的学习

一、自定义组件

ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。自定义组件特点：

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

1.自定义组件基本结构

2.自定义组件参数

3.build()函数

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

build()函数定义了UI描述，需要遵循以下规则 1,2,3,4,5,6

4.自定义组件的通用样式

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

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

1.页面

 页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。页面生命周期，也就是被@Entry装饰的组件生命周期

  

2.组件生命周期

  

@Entry装饰的组件，也就是首页生命周期

  

注：页面是一种特殊的自定义组件

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

  

4.自定义组件的生命周期实例

同一个页面MyComponent文件中定义父子组件，@Entry装饰的MyComponent，是页面的入口组件，即页面的根节点；Child组件是MyComponent组件的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效，所以MyComponent中声明了页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数

  

应用启动流程：

组件生命周期交互说明

总结

本文学习记录了，ArkUI开发页面和自定义组件的关系，以及页面与自定义组件的声明周期。

今天的小A继续暴跌，2024年开年4连跌，真是闻者伤心，听者落泪啊！我整个人都已经麻木了，不想接收到关于A股的任何消息，不想与A股产生任何的关联，只想赶紧逃避。奉劝各位朋友，没有参与的，这辈子千万不要参与了，言尽于此。