相关文章目录
文章目录
前言
一、build()函数和@Builder装饰器?
-
build()函数:build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。
-
@Builder:更轻量的UI元素复用机制,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。为了简化语言,我们将@Builder装饰的函数也称为"自定义构建函数"。
二、自定义组件和系统组件(内置组件)
在ArkUI中,UI显示的内容均为组件,其中框架直接提供的被称为系统组件。
而由开发者定义的则称为自定义组件。
在进行UI界面开发时,通常不仅仅是简单地将系统组件进行组合使用,还需要考虑诸如代码可复用性、业务逻辑与UI的分离以及后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件至关重要。
自定义组件具备以下特点:
- 可组合:开发者可以灵活地将系统组件、它们的属性以及方法组合使用,创建出丰富多样的UI界面。
- 可重用:自定义组件具有很高的复用性,可以被其他组件重复利用,并作为不同的实例在不同的父组件或容器中使用,从而提高开发效率。
- 数据驱动UI更新:自定义组件支持通过状态变量的改变来驱动UI的刷新,实现动态的数据展示和交互效果。
三、组件和页面
明确自定义组件和页面的关系:
自定义组件:使用@Component
装饰的UI单元,通过组合多个系统组件实现UI的复用,并且可以调用组件的生命周期方法。
页面:即应用的UI页面,由一个或多个自定义组件组成。使用@Entry
装饰的自定义组件作为页面的入口组件,即页面的根节点。每个页面只能有一个@Entry
装饰的组件。只有被@Entry
装饰的组件才能调用页面的生命周期方法。
页面生命周期(即被@Entry
装饰的组件生命周期)提供以下生命周期接口:
onPageShow
:页面每次显示时触发,包括路由过程、应用进入前台等场景。onPageHide
:页面每次隐藏时触发,包括路由过程、应用进入后台等场景。onBackPress
:用户点击返回按钮时触发。
组件生命周期(即使用@Component
装饰的自定义组件的生命周期)提供以下生命周期接口:
aboutToAppear
:组件即将出现时回调,发生在创建自定义组件的新实例后,执行其build()
函数之前。aboutToDisappear
:组件析构销毁之前执行。不允许在此函数中改变状态变量,特别是@Link
变量的修改,可能会导致应用程序行为不稳定。
生命周期流程(仅展示被@Entry
装饰的组件/页面生命周期)大致如下:
根据生命周期流程,我们可以从自定义组件的初始创建、重新渲染和删除来详细解释:
自定义组件的创建和渲染流程:
- 自定义组件的实例由ArkUI框架创建。
- 通过本地默认值或构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。
- 如果开发者定义了
aboutToAppear
方法,则在组件即将出现时执行该方法。 - 在首次渲染时,执行
build
方法渲染系统组件。如果子组件为自定义组件,则创建子自定义组件的实例。首次渲染过程中,框架会记录状态变量和组件的映射关系,以便在状态变量改变时驱动相关组件刷新。 - 当应用在后台启动时,由于应用进程并未销毁,因此仅需要执行页面的
onPageShow
生命周期方法。
四、自定义弹窗和其他弹窗
- 自定义弹窗(CustomDialog)
用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。 - 日期滑动选择器(DatePicker)
根据指定范围的Date创建可以选择日期的滑动选择器。 - 时间滑动选择器弹窗(TimePicker)
时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。 - 文本滑动选择器弹窗(TextPickerDialog)
根据指定的选择范围创建文本选择器,展示在弹窗上 - 列表选择弹窗(ActionSheet)
- 警告弹窗(AlertDialog)
总结
持续更新中