文章目录前言先看这个页面解决了什么问题页面结构速览关键状态是怎么组织的业务逻辑最值得看的函数第一段重点代码状态与数据入口第二段重点代码核心交互逻辑使用方法把页面跑起来之后怎么操作这个实现为什么值得借鉴可以继续优化的地方完整代码最后总结前言有时候真正重要的不是“能滚”而是“看起来像公告”。这个案例把 Marquee 和提示色、标签、卡片化容器结合起来更接近真实产品界面。 这一篇不只带你把页面看懂我会顺着代码结构、数据组织和交互路径把它拆成一个开发者真正能复用的实现模板。先看这个页面解决了什么问题这个案例主要解决三件事把公告样式跑马灯的核心数据集中托管在组件状态中。让用户在一个页面里完成查看、筛选、操作、反馈的完整闭环。用相对克制的 ArkUI 组件组合把业务信息分层展示出来。从实用角度看这种页面通常都不是孤立存在的它往往会挂在应用的某个一级入口下面。也就是说示例里很多处理方式都可以直接迁移到真实项目。页面结构速览先不急着看细节先把页面结构建立起来区域作用代码里的体现顶部区域提供标题与导航返回RowImageText内容主体展示核心信息与主操作区Column/List/Scroll等组合统计或辅助区展示聚合信息、筛选项或说明文字计算属性与状态联动行为入口处理新增、切换、确认、推进等动作事件函数和按钮点击逻辑这一页里出现的主要数据类型有页面内直接使用基础类型。关键状态是怎么组织的这类页面能不能写稳关键往往不在布局而在状态设计。当前案例里比较值得关注的状态包括isShow先讲状态字段再讲它们如何驱动界面切换和数据刷新。如果你自己扩展这个页面建议优先判断哪些数据属于长期状态需要持续保留在页面上的数据比如列表内容、筛选条件。瞬时状态只在某一次交互中短暂生效比如弹窗开关、输入框值、当前选中项。派生状态不必单独保存而是通过计算属性实时推导出来。业务逻辑最值得看的函数当前页面里建议优先读下面这些方法if我更建议你按照“先看输入再看输出最后看状态修改”的顺序去理解这些函数。这样读代码比从头到尾硬看要轻松很多。第一段重点代码状态与数据入口这部分代码定义了页面最核心的数据源是理解整个案例的起点。StateisShow:booleantruebuild(){Column(){if(this.isShow){Column({space:16}){Text(公告样式跑马灯).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(将 Marquee 组件美化成通知公告栏的样式).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)// 紧急通知Column({space:12}){Row({space:8}){Text(紧急)这里有几个很实用的判断标准State字段通常就是页面的驱动中心。如果一个字段一改界面就会立即跟着变化那它大概率就应该放进状态里。如果某个值完全可以通过已有状态算出来就更适合做计算属性。第二段重点代码核心交互逻辑真正决定这个页面“好不好用”的往往不是布局而是交互逻辑是否顺手。下面这段代码就是关键部分/** * 公告样式跑马灯 - 公告样式跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct MarqueeNoticeStyle{StateisShow:booleantruebuild(){Column(){if(this.isShow){Column({space:16}){Text(公告样式跑马灯).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(将 Marquee 组件美化成通知公告栏的样式)可以重点注意三件事这个函数接收了什么输入。它到底修改了哪些状态。修改之后页面上哪些区域会同步刷新。把这三点串起来基本就能搞懂页面的交互链路。使用方法把页面跑起来之后怎么操作如果你想验证这个案例是否真正理解到位可以按下面顺序手动操作一遍先进入页面观察顶部信息和默认展示内容。再尝试切换筛选项、按钮或标签看列表是否会立即变化。接着执行一次主操作比如新增、切换、标记、选择或推进。最后回头观察统计区、提示区或状态区有没有同步更新。如果这一整套流程都能说清楚说明你已经不只是“看懂了界面”而是看懂了它的运行机制。这个实现为什么值得借鉴从 ArkUI 工程角度看这个案例至少有三点值得保留状态粒度比较克制没有把所有东西都拆成独立变量。视图结构相对清楚顶部、内容区、辅助区和操作区分得开。业务函数命名直白阅读和后续维护成本都比较低。尤其是在做教学示例时这种写法很重要。因为读者不是来欣赏技巧的而是来确认“这个页面到底怎么搭起来”。可以继续优化的地方如果你准备把这个页面继续扩展成正式项目我会优先改这几件事把数据模型和页面组件拆开避免页面文件承担过多职责。把重复使用的卡片、标签、行项抽成独立组件。给关键操作补上更明确的异常处理、空状态和边界提示。如果涉及远程数据再补上加载态和接口层封装。完整代码下面保留案例完整代码方便你直接对照学习、复制和重构。/** * 公告样式跑马灯 - 公告样式跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct MarqueeNoticeStyle{StateisShow:booleantruebuild(){Column(){if(this.isShow){Column({space:16}){Text(公告样式跑马灯).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(将 Marquee 组件美化成通知公告栏的样式).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)// 紧急通知Column({space:12}){Row({space:8}){Text(紧急).fontSize(10).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).backgroundColor(#F44336).padding({left:8,right:8,top:3,bottom:3}).borderRadius(4)Marquee({start:true,step:6,loop:-1,fromStart:true,src:系统维护通知今晚 22:00-次日 02:00 进行系统升级维护届时部分服务将暂停使用}).layoutWeight(1).height(32).fontSize(13).fontColor(#F44336).backgroundColor(#FFEBEE).borderRadius(16)}.width(100%)// 系统通知Row({space:8}){Text(通知).fontSize(10).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).backgroundColor(DEMO_THEME_COLOR).padding({left:8,right:8,top:3,bottom:3}).borderRadius(4)Marquee({start:true,step:4,loop:-1,fromStart:true,src:新版本 v3.2.0 已发布修复已知问题并优化性能体验建议尽快更新}).layoutWeight(1).height(32).fontSize(13).fontColor(DEMO_THEME_COLOR).backgroundColor(#E8EAF6).borderRadius(16)}.width(100%)// 活动公告Row({space:8}){Text(活动).fontSize(10).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).backgroundColor(PRESET_COLORS[0].value).padding({left:8,right:8,top:3,bottom:3}).borderRadius(4)Marquee({start:true,step:3,loop:-1,fromStart:true,src:618 限时优惠活动火热进行中全场商品低至 5 折先到先得}).layoutWeight(1).height(32).fontSize(13).fontColor(PRESET_COLORS[0].value).backgroundColor(#E8F5E9).borderRadius(16)}.width(100%)// 带图标的公告Row({space:8}){Text().fontSize(16)Marquee({start:true,step:4,loop:-1,fromStart:true,src:HarmonyOS 开发者社区招募版主有意者请发送申请至 devharmonyos.com}).layoutWeight(1).height(36).fontSize(13).fontColor(#333333).backgroundColor(#FFF8E1).borderRadius(18)}.width(100%)// 安全提示Row({space:8}){Text(⚠).fontSize(16)Marquee({start:true,step:3,loop:-1,fromStart:true,src:安全提醒请勿在公共网络环境下输入敏感信息保护好您的账户安全}).layoutWeight(1).height(36).fontSize(13).fontColor(#E65100).backgroundColor(#FFF3E0).borderRadius(18)}.width(100%)}.width(100%).padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}.alignItems(HorizontalAlign.Start)}Text(公告样式跑马灯 - 公告样式跑马灯).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}最后总结公告样式跑马灯 这个案例并不靠复杂技巧取胜它更像一个结构扎实、逻辑完整的业务页面样板。把这篇文章里的状态设计、函数组织和页面分层吃透之后你再去写同类型功能速度会明显快很多。