HarmonyOS7 对象监听任务页实战：@Observed 与 @ObjectLink 不只是会用，还要用得顺手

发布时间：2026/8/21 3:34:37

HarmonyOS7 对象监听任务页实战：@Observed 与 @ObjectLink 不只是会用，还要用得顺手
文章目录先看两个被观察的对象addScore() 比构造函数更值得看ObjectLink 适合拆子组件页面结构怎么看完整代码写在最后Observed和ObjectLink很适合讲“对象级响应式”但只讲概念会有点飘。这个案例把它放到用户资料和每日任务里就好理解多了用户积分变了资料卡要刷新任务完成了任务行也要刷新。这类页面如果只靠普通对象很容易出现“数据确实改了但 UI 没动”的情况。HarmonyOS7 里做对象监听关键就是把对象本身纳入响应式体系。先看两个被观察的对象代码里有两个Observed类UserProfile和Task。前者保存用户名、年龄、等级、头像和积分后者保存任务 id、标题、完成状态和奖励积分。它们不是随便写的普通类。加上Observed后子组件可以通过ObjectLink观察对象属性变化。这样父组件传给子组件的不是一份死数据而是可以继续响应更新的对象。addScore()比构造函数更值得看用户完成任务后积分会增加积分达到等级阈值时还会升级。这个逻辑放在UserProfile.addScore()里比散落在按钮点击事件中清楚很多。addScore(pts:number){this.scoreptsif(this.scorethis.level*100){this.levelthis.scorethis.score-(this.level-1)*100}}这段代码说明了一个很实用的写法对象自己的业务规则尽量放回对象内部。页面只负责触发动作不要把升级规则、积分计算、UI 刷新混在一个点击事件里。ObjectLink适合拆子组件像用户卡片、任务行这种组件如果每个字段都用Prop传参数会越来越多而且子组件无法自然感知对象内部变化。ObjectLink更适合这种“整对象传入局部字段更新”的场景。不过它也不是万能的。只有对象被Observed标记ObjectLink才有意义如果对象结构经常临时加字段ArkTS 的静态类型也不会喜欢这种写法。页面结构怎么看ObservedProfilePage里维护了userProfile和taskList。用户资料卡关注积分和等级每日任务列表关注完成状态。读代码时可以先看两个类再看子组件如何接收对象最后看完成任务时怎么更新积分。如果你做的是用户中心、任务系统、订单卡片这类页面这种写法比一堆零散State更容易维护。完整代码下面是完整代码。入口组件名是ObservedProfilePage适合拿来练习 HarmonyOS7 中对象状态监听和子组件刷新。// Observed 与 ObjectLink 对象监听ObservedclassUserProfile{name:stringage:numberlevel:numberavatar:stringscore:numberconstructor(name:string,age:number,level:number,avatar:string,score:number){this.namenamethis.ageagethis.levellevelthis.avataravatarthis.scorescore}addScore(pts:number){this.scoreptsif(this.scorethis.level*100){this.levelthis.scorethis.score-(this.level-1)*100}}}ObservedclassTask{id:numbertitle:stringdone:booleanpoints:numberconstructor(id:number,title:string,done:boolean,points:number){this.ididthis.titletitlethis.donedonethis.pointspoints}}// 子组件用户卡片ObjectLink 监听 UserProfileComponentstruct UserCard{ObjectLinkuser:UserProfilebuild(){Column({space:10}){Row({space:12}){Text(this.user.avatar).fontSize(36).width(60).height(60).textAlign(TextAlign.Center).backgroundColor(#EFF6FF).borderRadius(30)Column({space:4}){Text(this.user.name).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Row({space:8}){Text(Lv.${this.user.level}).fontSize(12).fontColor(Color.White).backgroundColor(#2563EB).padding({left:8,right:8,top:2,bottom:2}).borderRadius(10)Text(年龄${this.user.age}).fontSize(12).fontColor(#6B7280)}}.alignItems(HorizontalAlign.Start).layoutWeight(1)Column({space:2}){Text(this.user.score.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#D97706)Text(积分).fontSize(11).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.Center)}.width(100%).alignItems(VerticalAlign.Center)// 经验进度条Column({space:4}){Row(){Text(经验值).fontSize(12).fontColor(#6B7280).layoutWeight(1)Text(${this.user.score}/${this.user.level*100}).fontSize(12).fontColor(#2563EB)}Progress({value:this.user.score,total:this.user.level*100,type:ProgressType.Linear}).color(#2563EB).backgroundColor(#E5E7EB).style({strokeWidth:8}).width(100%)}}.width(100%).padding(16).backgroundColor(Color.White).borderRadius(12).shadow({radius:8,color:rgba(0,0,0,0.06),offsetY:2})}}// 子组件任务行ObjectLink 监听 TaskComponentstruct TaskRow{ObjectLinktask:TaskonComplete:(pts:number)void(){}build(){Row({space:12}){Text(this.task.done?✅:⬜).fontSize(22).onClick((){if(!this.task.done){this.task.donetruethis.onComplete(this.task.points)}})Column({space:3}){Text(this.task.title).fontSize(14).fontColor(this.task.done?#9CA3AF:#111827).decoration({type:this.task.done?TextDecorationType.LineThrough:TextDecorationType.None})Text(${this.task.points}积分).fontSize(12).fontColor(this.task.done?#9CA3AF:#D97706)}.alignItems(HorizontalAlign.Start).layoutWeight(1)if(!this.task.done){Text(去完成).fontSize(12).fontColor(#2563EB).backgroundColor(#EFF6FF).padding({left:10,right:10,top:4,bottom:4}).borderRadius(12).onClick((){this.task.donetruethis.onComplete(this.task.points)})}else{Text(已完成).fontSize(12).fontColor(#059669).backgroundColor(#D1FAE5).padding({left:10,right:10,top:4,bottom:4}).borderRadius(12)}}.width(100%).padding({left:16,right:16,top:12,bottom:12}).backgroundColor(this.task.done?#FAFAFA:Color.White).borderRadius(10).alignItems(VerticalAlign.Center)}}EntryComponentstruct ObservedProfilePage{StateuserProfile:UserProfilenewUserProfile(张三,25,3,‍,65)StatetaskList:Task[][newTask(1,完成每日签到,false,10),newTask(2,阅读一篇技术文章,false,20),newTask(3,完成一个练习项目,false,50),newTask(4,参与社区问答,false,30),newTask(5,分享学习心得,false,40),]build(){Column({space:0}){// 标题Text(Observed ObjectLink).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).padding({left:20,right:20,top:20,bottom:4})Text(监听对象内部属性变化实现嵌套数据驱动视图).fontSize(13).fontColor(#6B7280).width(100%).padding({left:20,right:20,bottom:12})// 说明Row(){Text().fontSize(14).margin({right:6})Text(Observed 类 ObjectLink 子组件对象属性变化时触发子组件重渲染).fontSize(12).fontColor(#1E40AF).layoutWeight(1)}.width(100%).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(#DBEAFE).margin({bottom:12}).alignItems(VerticalAlign.Top)Scroll(){Column({space:12}){// 用户卡片UserCard({user:this.userProfile}).margin({left:20,right:20})// 操作按钮Row({space:10}){Button(10 积分).fontSize(12).fontColor(#D97706).backgroundColor(#FEF3C7).borderRadius(16).padding({left:14,right:14,top:8,bottom:8}).onClick((){this.userProfile.addScore(10)})Button(50 积分).fontSize(12).fontColor(#059669).backgroundColor(#D1FAE5).borderRadius(16).padding({left:14,right:14,top:8,bottom:8}).onClick((){this.userProfile.addScore(50)})Button(年龄1).fontSize(12).fontColor(#7C3AED).backgroundColor(#F5F3FF).borderRadius(16).padding({left:14,right:14,top:8,bottom:8}).onClick((){this.userProfile.age})}.padding({left:20,right:20})// 任务列表标题Text(每日任务完成任务获得积分).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).padding({left:20})Column({space:8}){ForEach(this.taskList,(task:Task){TaskRow({task:task,onComplete:(pts:number){this.userProfile.addScore(pts)}}).margin({left:20,right:20})},(task:Task)task.id.toString())}// 已完成统计Row({space:12}){Text(✅).fontSize(20)Text(已完成${this.taskList.filter((t:Task)t.done).length}/${this.taskList.length}任务).fontSize(14).fontColor(#374151).layoutWeight(1)Text(${this.taskList.filter((t:Task)t.done).reduce((s:number,t:Task)st.points,0)}积分).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#D97706)}.width(100%).padding({left:20,right:20,top:12,bottom:12}).backgroundColor(#FFFBEB).margin({bottom:24}).alignItems(VerticalAlign.Center)}}.layoutWeight(1)}.width(100%).height(100%).backgroundColor(#F9FAFB)}}写在最后这个例子不复杂但很适合反复看。很多 ArkUI 页面写不顺其实不是组件不会用而是状态、结构和反馈没有放在一起设计。

相关新闻

单片机实验2

单片机实验2

一、IIC总线协议1.简介定义：是一种广泛用于嵌入式系统的同步、串行、半双工通信协议，用于在同一块电路板上的集成电路之间进行通信。I2C总线：是一种物理通信架构，用于连接多个设备，实现设备之间的数据传输。I2C协议&am…

2026/8/15 22:34:24 阅读更多 →
C++23 ＜stacktrace＞库实战：跨平台调试与异常处理新利器

C++23 ＜stacktrace＞库实战：跨平台调试与异常处理新利器

1. 项目概述：为什么我们需要一个标准化的栈踪迹库？调试，大概是每个C开发者又爱又恨的环节。爱的是，当程序在你面前崩溃，而你通过蛛丝马迹最终定位到那个深藏不露的bug时，那种成就感无与伦比；恨的…

2026/8/20 7:24:39 阅读更多 →
Spring框架@RequestAttribute注解详解与应用实践

Spring框架@RequestAttribute注解详解与应用实践

1. RequestAttribute 注解深度解析在Spring框架中，RequestAttribute注解是一个相对小众但非常实用的注解。它主要用于从请求作用域(request scope)中获取预先存在的属性值。与大家更熟悉的RequestParam不同，RequestAttribute不是用来获取请求参数的&…

2026/8/20 23:34:37 阅读更多 →

最新新闻

电路分析每日一题59：戴维南等效与最大功率传输定理详解

电路分析每日一题59：戴维南等效与最大功率传输定理详解

这次我们来看一个电路基础相关的每日一题项目，题目编号为59。这类题目通常聚焦于电路分析的核心知识点，如节点电压法、网孔电流法、戴维南/诺顿等效、动态电路分析等，是电子、电气、自动化等专业学生巩固基础、准备考试的重要练习。对于工程师…

2026/8/21 3:34:20 阅读更多 →
免训练主动推理智能体：PRIME框架实现记忆演化与用户中心化服务

免训练主动推理智能体：PRIME框架实现记忆演化与用户中心化服务

1. 项目概述：当智能体开始“主动思考”最近在搞AI智能体（Agent）的朋友，估计都绕不开一个核心痛点：怎么让这玩意儿别总像个“一问一答”的复读机，而是能像人一样，主动、连贯、有预见性地去思考和…

2026/8/21 3:34:20 阅读更多 →
平方根价格冲击：算法交易市场内生性周期的关键机制

平方根价格冲击：算法交易市场内生性周期的关键机制

1. 从市场异象到理论探索：平方根价格冲击的引入最近在和一些做量化交易的朋友聊天时，大家不约而同地提到了一个现象：在某些高频或算法交易主导的市场中，价格有时会呈现出一种令人费解的周期性波动。这种波动并非由外部消息驱动&am…

2026/8/21 3:34:20 阅读更多 →
Grok iOS Projects功能详解：从单次对话到项目管理的工作流升级

Grok iOS Projects功能详解：从单次对话到项目管理的工作流升级

1. 先搞清楚 Grok iOS 的 Projects 功能到底能做什么如果你在关注 Grok 这个 AI 助手，并且主要在 iPhone 或 iPad 上使用它，那么这次 iOS 客户端新增的 “Projects” 功能，值得你花几分钟了解一下。它解决的核心问题很简单：如何把…

2026/8/21 3:34:20 阅读更多 →
UVM验证工程师面试题解析与实战技巧

UVM验证工程师面试题解析与实战技巧

1. UVM面试题集解析：验证工程师必备知识体系作为芯片验证领域的黄金标准，UVM（Universal Verification Methodology）早已成为验证工程师面试中的必考内容。过去三年我参与过数十场验证岗位的技术面试，发现候选人普遍存在…

2026/8/21 3:34:20 阅读更多 →
免费 Switch 模拟器 yuzu 上手全指南：几步就能在 PC 跑起 Switch 游戏

免费 Switch 模拟器 yuzu 上手全指南：几步就能在 PC 跑起 Switch 游戏

免费 Switch 模拟器 yuzu 上手全指南：几步就能在 PC 跑起 Switch 游戏 【免费下载链接】yuzu 任天堂 Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu 想玩的游戏只发在 Switch 上，主机却不在手边，怎么办&#…

2026/8/21 3:33:20 阅读更多 →

日新闻

机场边检旅客定位系统国产化白皮书：算法、硬件、底座平台全程自主

机场边检旅客定位系统国产化白皮书：算法、硬件、底座平台全程自主

前言随着国家数字基础设施信创替代、关键技术自主可控战略持续深化，口岸智慧安防、边检智能管控领域正全面进入国产化、自主化、安全可控升级周期。当前国内机场边检旅客识别与定位体系长期依赖国外商用视觉算法、进口成像硬件、闭源通用计算平台，存在核…

2026/8/21 0:00:42 阅读更多 →
别再把“数字孪生”当空间智能了！镜像视界揭开四维时空的真正面纱

别再把“数字孪生”当空间智能了！镜像视界揭开四维时空的真正面纱

别再把“数字孪生”当空间智能了！镜像视界揭开四维时空的真正面纱当下数字化建设浪潮中，很多项目将三维可视化、视频贴图叠加的数字孪生等同于空间智能。传统数字孪生更多停留在三维场景复刻，擅长把物理世界“画出来、展示出来”，…

2026/8/21 0:00:42 阅读更多 →
105、车载温度范围-40°C到85°C的影像质量一致性——ISP参数温漂补偿与产线标定策略

105、车载温度范围-40°C到85°C的影像质量一致性——ISP参数温漂补偿与产线标定策略

105、车载温度范围-40C到85C的影像质量一致性——ISP参数温漂补偿与产线标定策略 去年冬天在北方某车厂做A样评审，凌晨四点的黑河试验场，零下三十三度。客户拿了一台冷启动的车，中控屏上倒车影像全是雪花噪点，暗部细节直接糊成一片。我第一反应是sensor温度没上来，暗电流…

2026/8/21 0:00:42 阅读更多 →

周新闻

基于阿里云与通义千问（Qwen）构建AI应用：从模型调用到生产部署的完整实践指南

基于阿里云与通义千问（Qwen）构建AI应用：从模型调用到生产部署的完整实践指南

如果你是一名开发者，最近可能已经感受到了AI大模型正在从“玩具”变成“生产力工具”的强烈信号。从代码补全到智能Agent，从本地部署到云端API，我们正处在一个技术栈快速重构的节点。然而，面对层出不穷的模型、框架和工具&#xf…

2026/8/21 3:21:33 阅读更多 →
工业通信系统底层逻辑：04 反射——高频能量撞墙之后会发生什么？

工业通信系统底层逻辑：04 反射——高频能量撞墙之后会发生什么？

第四篇：反射——高频能量撞墙之后会发生什么？ —— 你以为信号已经过去了，其实它正在回来打你 老Q的现场笔记 第五季，我们正式进入工业神经系统层。这里不再是单个设备的战斗，而是整个工厂“经脉”层面的秩序之战。从这一篇开始，你将第一次看清：看似简单的信号传播，背…

2026/8/21 0:02:09 阅读更多 →
【文章复现】非线性值迭代自适应动态规划（ADP）：离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

【文章复现】非线性值迭代自适应动态规划（ADP）：离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室👇 关注我领取海量matlab电子书和…

2026/8/19 11:55:16 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/20 6:11:08 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/20 21:46:49 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/21 0:14:22 阅读更多 →