ArkTs基础语法-声明式UI-页面和自定义组件生命周期

最新推荐文章于 2025-05-07 15:28:00 发布
最新推荐文章于 2025-05-07 15:28:00 发布
阅读量1.3k 收藏 16
点赞数 19
分类专栏： 鸿蒙Next 文章标签： ui 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitzzp/article/details/141256658
版权

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

组件和页面的关系

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

生命周期

页面生命周期

  • onPageShow：页面每次显示的时候触发一次，包括路由过程、应用进入前台等场景。
  • onPageHide：页面每次隐藏的时候触发一次，包括路由过程、应用进入后台等场景。
  • onBackPress：当用户点击返回按钮的时候触发。

组件生命周期

  • aboutToAppear：组件即将出现时回调该接口，具体时机为创建自定义组件的新实例后，其build()函数执行之前。
  • onDidBuild：组件build()函数执行完成之后回调该接口，不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，可能会导致UI表现不稳定。
  • aboutToDisappear：在组件销毁之前执行，不允许在aboutToDisappear中改变状态变量。

@Entry装饰的组件，即页面的生命周期流程如下图：

最低0.47元/天 解锁文章
【HarmonyOS】ArkTS开发中自定义组件的完全指南：从基础用法到生命周期管理
一键难忘的博客
11-25 1977
在ArkUI中，UI的显示内容由系统组件和自定义组件共同构成。系统组件由框架直接提供，而开发者可以通过定义自己的自定义组件来实现更高度的复用性、业务逻辑与UI分离以及后续版本演进等需求。本文将介绍自定义组件的基本用法、结构、生命周期和样式。允许开发者组合使用系统组件，并可以自由搭配属性和方法。自定义组件可以在其他组件中重用，作为不同实例在不同的父组件或容器中使用。通过状态变量的改变，来触发UI的刷新。
ArkTS卡片生命周期
坚果的博客
05-20 8574
FormExtensionAbility进程不能常驻后台，即在卡片生命周期回调函数中无法处理长时间的任务，在生命周期调度完成后会继续存在5秒，如5秒内没有新的生命周期回调触发则进程自动退出。针对可能需要5秒以上才能完成的业务逻辑，建议。生命周期接口，其中在onAddForm的入参want中可以通过。在EntryFormAbility.ts中，导入相关模块。在EntryFormAbility.ts中，实现。创建ArkTS卡片，需实现。进行处理，处理完成后使用。取出卡片的相关信息。
ArkTS中的生命周期
MISS_zhang_0110的博客
01-15 931
• aboutToAppear：组件即将出现时回调该接⼝，具体时机为在创建⾃定义组件的新实例后，在执行其build()函数之前执行。• aboutToDisappear：在自定义组件即将析构销毁时执行。@Component// 组件生命周期console.info('在自定义组件即将析构销毁时执行')// 组件生命周期console.info('在自定义组件即将出现时回调该接⼝')build(){Row(){
鸿蒙开发系列教程（六）--ArkTS语言：生命周期
huazi99于老师的博客
01-19 1764
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。状态变量 -> UI组件（包括ForEach和if）。
[HarmonyOSNext鸿蒙开发]2.ArkTS声明式开发:页面和自定义组件
最新发布
qq_39277137的博客
05-07 907
🌟 ArkUI组件生命周期全解析一、组件与页面的关系二、生命周期图解（组件的一生）三、核心生命周期方法页面级方法（大门守卫的职责）组件级方法（积木的自我管理）四、代码示例解析五、常见操作的生命周期轨迹六、最佳实践指南七、生命周期监听技巧（进阶）八、情景模拟测试。
ArkTS - 组件生命周期
记录点滴
12-31 3136
ArkTS - 组件生命周期
ArkTS 中Tabs 页签内引入页面的 onPageShow和onPageHide 没有执行，是什么原因？怎么解决？
读心悦
10-20 829
在ArkTS中，如果在Tabs页签内引入的页面的onPageShow和onPageHide。
ArkTs生命周期
2301_76430284的博客
02-02 963
ArkTs页面生命周期、组件生命周期、State模型UIAbility生命周期，满满的干货
ArkTs基础语法-声明式UI-条件渲染/循环渲染
gitzzp的博客
08-17 911
ForEach依次遍历新数据源，遍历数据项"one"时生成键值"0"，存在相同键值，因此不创建新组件。从以上可以看出，当最终键值生成规则包含index时，期望的界面渲染结果为[‘one’, ‘new item’, ‘two’, ‘three’]，而实际的渲染结果为[‘one’, ‘two’, ‘three’, ‘three’]，渲染结果不符合开发者预期。在ForEach组件进行非首次渲染时，会检查新生成的键值是否已经存在，如果不存在，会创建一个新的组件，如果已经存在，则直接渲染该键值所对应的组件。
鸿蒙ArkTS基础知识-自定义组件生命周期函数onBackPress的调用。
m0_70749039的博客
03-29 2557
本课程使用声明式语法和组件化基础知识，搭建一个可刷新的排行榜页面。在排行榜页面中，使用循环渲染控制语法来实现列表数据渲染，使用@Builder创建排行列表布局内容，使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键，来学习自定义组件生命周期函数。效果如图所示：
第七天 开始学习ArkTS基础，理解声明式UI编程思想
IT深耕十余载，大道之简
02-06 651
学习 ArkTS 的声明式 UI 编程思想是掌握 HarmonyOS 应用开发的核心基础。
鸿蒙HarmonyOS开发框架—ArkTS语言（基本语法 三）
shudaoshanQAQ的博客
01-14 2123
前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定，仅与使用方进行数据传递
HarmonyOS应用开发-ArkTS页面和自定义组件生命周期
初一十五的博客
03-15 2876
本次主要分成组件生命周期和页面的生命周期
鸿蒙4.0开发笔记之ArkTS语法基础之应用生命周期与页面中组件的生命周期（十六）
Viewinfinitely的博客
12-06 5862
关于HarmonyOS中的应用生命周期就是代表了一个HarmonyOS应用中所有页面从创建、开启到销毁等过程的全生命周期。页面生命周期，即被@Entry装饰的组件生命周期。组件生命周，即⼀般用@Component装饰的自定义组件的生命周期。
arkTS中实现页面跳转
qq_62803760的博客
03-21 2796
arkTS中使用router进行页面跳转与数据传递操作
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 三）
爱吃土豆丝的打工人的博客
07-17 3572
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果有自定义子组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：状态变量 -> UI组件（包括ForEach和if）
ArkTS-页面和自定义组件生命周期
qq_41154522的博客
11-27 1593
鸿蒙开发-页面和自定义组件生命周期
ArkTS 页面和自定义组件的生命周期
读心悦
09-04 1099
页面：就是应用的 UI 页面，可以由一个或者多个自定义组件构成，页面则是使用@Entry 装饰的自定义组件作为页面的入口组件，也就是页面的根节点。一个页面只能有一个@Entry 装饰器，只有被@Entry 装饰的组件，才可以调用页面的生命周期。自定义组件：是使用@Component 装饰的 UI 单元，可以使用多个系统组件来封装可以复用的组件。
arkts中如何实现交互，和页面转换
03-08
<think>好的，我现在要解决用户的问题，关于在ArkTS中如何实现交互和页面转换。首先，我需要回顾之前用户的问题和我的回答，确保这次回答保持一致。之前用户询问的是如何发送请求，这次是关于交互和页面转换，属于另一个方面，但可能用户正在学习ArkTS的整体开发，所以需要详细解答。 用户可能是一个刚开始学习鸿蒙应用开发的开发者，对ArkTS的交互和导航机制不太熟悉。他们可能希望了解如何在应用中处理用户输入，比如点击事件，以及如何在不同的页面之间跳转，这些都是应用开发的基础。 接下来，我需要确定ArkTS中实现交互的方法。交互通常涉及事件处理，比如点击、滑动等。ArkTS基于TypeScript，所以应该使用类似的事件绑定机制。可能使用@State来管理状态，当状态变化时，UI会自动更新。例如，点击按钮改变文本内容。 然后是页面转换，也就是导航。在鸿蒙中，页面跳转通常通过页面路由（router）来实现。需要导入router模块，并配置路由信息。可能涉及两种方式：声明式导航和编程式导航。声明式导航使用组件如Navigator，而编程式则通过调用pushUrl等方法。 需要注意权限配置，比如在config.json中声明路由，每个页面需要在pages列表中注册。此外，页面间传递参数的方式，比如通过params对象传递数据，以及在目标页面如何接收参数。 可能还需要提到一些高级功能，比如转场动画，页面返回时传递数据，以及生命周期方法的处理。例如，onPageShow和onPageHide这些生命周期函数，可以在页面显示或隐藏时执行操作。 用户可能还关心代码示例，因此需要提供简单的例子，比如点击按钮跳转页面，并在新页面显示传递的参数。此外，要强调最佳实践，比如封装路由方法、使用类型安全的参数传递，以及注意事项如路由栈管理，避免内存泄漏。 我需要检查是否有遗漏的点，比如页面返回如何处理，如何监听返回按钮的事件，或者使用自定义的返回逻辑。同时，是否需要提到模态窗口或底部导航栏的切换，但根据用户的问题，可能主要集中在基本的页面跳转和事件交互。 最后，要确保回答结构清晰，分步骤说明，代码示例正确，并且语言简洁易懂。参考之前的回答，用户可能喜欢分点说明，代码块使用正确的语法高亮，并且有注意事项部分。需要确认所有术语是否符合鸿蒙的官方文档，比如页面路由的API是否有变化，保持信息的准确性。</think>在ArkTS中实现交互与页面转换，主要通过状态管理和页面路由机制完成。以下是详细实现方法： --- ### 一、交互实现核心方法 #### 1. 点击事件处理 ```typescript // 按钮点击响应 @Entry @Component struct ClickDemo { @State counter: number = 0 build() { Column() { Text(`点击次数：${this.counter}`) .fontSize(20) Button('点我+1') .onClick(() => { this.counter += 1 }) .margin(10) } .width('100%') } } ``` #### 2. 输入交互 ```typescript // 文本输入双向绑定 @Entry @Component struct InputDemo { @State inputText: string = '' build() { Column() { TextInput({ text: this.inputText }) .onChange((value: string) => { this.inputText = value }) Text(`输入内容：${this.inputText}`) .fontColor('#666') } .padding(15) } } ``` --- ### 二、页面转换实现 #### 1. 路由配置 在`src/main/resources/base/profile/main_pages.json`中声明页面路径： ```json { "src": [ "pages/Index", "pages/DetailPage" ] } ``` #### 2. 基础跳转 ```typescript // 页面跳转示例 import router from '@ohos.router' @Entry @Component struct IndexPage { build() { Column() { Button('跳转到详情页') .onClick(() => { // 带参数跳转 router.pushUrl({ url: 'pages/DetailPage', params: { id: 123 } }) }) } .width('100%') } } // 目标页面接收参数 @Entry @Component struct DetailPage { private receivedId: number = router.getParams()?.['id'] || 0 build() { Column() { Text(`接收到的ID：${this.receivedId}`) Button('返回').onClick(() => router.back()) } } } ``` --- ### 三、进阶交互技巧 #### 1. 转场动画 ```typescript router.pushUrl({ url: 'pages/DetailPage', params: { id: 456 } }, router.RouterMode.Standard, (err) => { if (!err) { // 添加页面转场动画 router.getRouterInstance().setPageTransition({ type: PageTransitionType.Push, duration: 300, curve: Curve.EaseOut }) } }) ``` #### 2. 页面间通信 ```typescript // 返回时传递数据 router.back({ url: 'pages/Index', params: { result: '操作成功' } }) // 接收返回数据 router.showBackPressAlert() // 监听返回事件 router.getParams() // 在Index页面获取返回参数 ``` --- ### 四、最佳实践建议 1. **路由封装** 建议创建`RouterUtil.ts`统一管理路由逻辑： ```typescript export class RouterUtil { static navigateTo(url: string, params?: object) { router.pushUrl({ url: url, params: params }) } } ``` 2. **类型安全** 使用TS接口规范路由参数： ```typescript interface DetailParams { id: number source?: string } const params: DetailParams = { id: 1001 } ``` 3. **生命周期控制** 通过页面生命周期函数管理状态： ```typescript @Component struct MyPage { onPageShow() { console.log('页面显示时刷新数据') } onPageHide() { console.log('页面隐藏时暂停操作') } } ``` --- ### 五、注意事项 1. **路由栈管理** 使用`router.clear()`清空历史栈时需谨慎 2. **内存优化** 页面返回时及时释放非必要资源 3. **路径规范** 页面路径需遵循`pages/XXX`格式且全小写 完整示例可参考华为官方文档：[页面路由开发指南](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkts-routing-0000001633690957)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值