HarmonyOS7公告样式跑马灯实战：公告条视觉包装-育师

文章目录

- - 前言
  - 先看这个页面解决了什么问题
  - 页面结构速览
  - 关键状态是怎么组织的
  - 业务逻辑最值得看的函数
  - 第一段重点代码：状态与数据入口
  - 第二段重点代码：核心交互逻辑
  - 使用方法：把页面跑起来之后怎么操作
  - 这个实现为什么值得借鉴
  - 可以继续优化的地方
  - 完整代码
  - 最后总结

前言

有时候真正重要的不是“能滚”，而是“看起来像公告”。这个案例把 Marquee 和提示色、标签、卡片化容器结合起来，更接近真实产品界面。这一篇不只带你把页面看懂，我会顺着代码结构、数据组织和交互路径，把它拆成一个开发者真正能复用的实现模板。

先看这个页面解决了什么问题

这个案例主要解决三件事：

把公告样式跑马灯的核心数据集中托管在组件状态中。
让用户在一个页面里完成查看、筛选、操作、反馈的完整闭环。
用相对克制的 ArkUI 组件组合，把业务信息分层展示出来。

从实用角度看，这种页面通常都不是孤立存在的，它往往会挂在应用的某个一级入口下面。也就是说，示例里很多处理方式，都可以直接迁移到真实项目。

页面结构速览

先不急着看细节，先把页面结构建立起来：

区域	作用	代码里的体现
顶部区域	提供标题与导航返回	`Row`+`Image`+`Text`
内容主体	展示核心信息与主操作区	`Column`/`List`/`Scroll`等组合
统计或辅助区	展示聚合信息、筛选项或说明文字	计算属性与状态联动
行为入口	处理新增、切换、确认、推进等动作	事件函数和按钮点击逻辑

这一页里出现的主要数据类型有：页面内直接使用基础类型。

关键状态是怎么组织的

这类页面能不能写稳，关键往往不在布局，而在状态设计。当前案例里比较值得关注的状态包括：

isShow

先讲状态字段，再讲它们如何驱动界面切换和数据刷新。

如果你自己扩展这个页面，建议优先判断哪些数据属于：

长期状态：需要持续保留在页面上的数据，比如列表内容、筛选条件。
瞬时状态：只在某一次交互中短暂生效，比如弹窗开关、输入框值、当前选中项。
派生状态：不必单独保存，而是通过计算属性实时推导出来。

业务逻辑最值得看的函数

当前页面里，建议优先读下面这些方法：

if

我更建议你按照“先看输入，再看输出，最后看状态修改”的顺序去理解这些函数。这样读代码，比从头到尾硬看要轻松很多。

第一段重点代码：状态与数据入口

这部分代码定义了页面最核心的数据源，是理解整个案例的起点。

@StateisShow:boolean=truebuild(){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'./types'@Entry@Componentstruct MarqueeNoticeStyle{@StateisShow:boolean=truebuild(){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'./types'@Entry@Componentstruct MarqueeNoticeStyle{@StateisShow:boolean=truebuild(){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 开发者社区招募版主，有意者请发送申请至 dev@harmonyos.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)}}