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

发布时间：2026/8/13 12:12:13

HarmonyOS7公告样式跑马灯实战：公告条视觉包装
文章目录前言先看这个页面解决了什么问题页面结构速览关键状态是怎么组织的业务逻辑最值得看的函数第一段重点代码状态与数据入口第二段重点代码核心交互逻辑使用方法把页面跑起来之后怎么操作这个实现为什么值得借鉴可以继续优化的地方完整代码最后总结前言有时候真正重要的不是“能滚”而是“看起来像公告”。这个案例把 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)}}最后总结公告样式跑马灯 这个案例并不靠复杂技巧取胜它更像一个结构扎实、逻辑完整的业务页面样板。把这篇文章里的状态设计、函数组织和页面分层吃透之后你再去写同类型功能速度会明显快很多。

相关新闻

影刀RPA 文件批量重命名与分类整理自动化

影刀RPA 文件批量重命名与分类整理自动化

影刀RPA 文件批量重命名与分类整理自动化 作者：林焱 什么情况用 电脑用久了，文件夹里乱七八糟——下载的文件没改名、照片按相机编号命名、同事发来的文件命名规则不统一。想整理又觉得几百个文件手动改太费劲。 用RPA做文件整理，效率惊人…

2026/8/10 18:59:05 阅读更多 →
HarmonyOS7多行文字跑马灯实战：多文本块排布与滚动

HarmonyOS7多行文字跑马灯实战：多文本块排布与滚动

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

2026/8/11 20:17:51 阅读更多 →
Vue 2 迁移到 Vue 3 时的 v-model 语法不兼容 问题，警告 Extraneous non-props attributes (modelValue)

Vue 2 迁移到 Vue 3 时的 v-model 语法不兼容 问题，警告 Extraneous non-props attributes (modelValue)

[Vue warn]: Extraneous non-props attributes (modelValue) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 这个警告的原因是 Vue 3 中 v-model 的语法变化与组件存在多根节点（Frag…

2026/8/12 8:14:02 阅读更多 →

最新新闻

洛雪音乐自定义解析源 lx-source：3 步搭建你的专属音乐解析服务

洛雪音乐自定义解析源 lx-source：3 步搭建你的专属音乐解析服务

洛雪音乐自定义解析源 lx-source：3 步搭建你的专属音乐解析服务 【免费下载链接】lx-source lx-music-custom-source 洛雪音乐自定义解析源 项目地址: https://gitcode.com/gh_mirrors/lx/lx-source 你是不是也有过这样的困扰：喜欢的歌分散在酷狗…

2026/8/13 12:11:43 阅读更多 →
判别式语言模型检索器：融合双塔与生成式优势，实现动态文本精准匹配

判别式语言模型检索器：融合双塔与生成式优势，实现动态文本精准匹配

1. 先搞清楚这篇论文到底解决了检索领域的哪个核心痛点 如果你正在做搜索、推荐或者任何需要从海量候选池里快速找到目标内容的系统，那么这篇关于“判别式语言模型作为检索器”的论文，值得你花时间仔细看看。它讨论的不是一个花哨的新功能，而…

2026/8/13 12:11:43 阅读更多 →
MySQL索引查看与优化实战：从SHOW INDEX到EXPLAIN的完整指南

MySQL索引查看与优化实战：从SHOW INDEX到EXPLAIN的完整指南

1. 项目概述：为什么我们需要“看见”索引刚接触MySQL那会儿，我总觉得索引这东西挺“玄学”的。建表时随手加个索引，查询时确实快了，但有时候又发现它没起作用，甚至拖慢了写入速度。后来踩坑多了才明白，索引…

2026/8/13 12:11:43 阅读更多 →
金融交易中间件核心技术解析与应用实践

金融交易中间件核心技术解析与应用实践

1. 交易中间件的定义与核心价值 交易中间件（Transaction Middleware）是金融科技领域的基础设施级软件，它如同金融交易的高速公路，负责在异构系统间可靠传输交易指令和数据。这类软件需要满足三个核心特性：高吞吐&#…

2026/8/13 12:11:43 阅读更多 →
C语言爱心代码：从数学方程到动态图形，掌握编程核心思想

C语言爱心代码：从数学方程到动态图形，掌握编程核心思想

1. 项目概述：当代码遇上浪漫 如果你在搜索引擎里敲下“C语言爱心代码”，大概率会看到满屏的星号（*）和空格组成的简单图案。很多人觉得这不过是初学者的小把戏，打印个心形就算完事。但作为一个写了十几年C语言的老码农&…

2026/8/13 12:11:43 阅读更多 →
Python网络爬虫实战：从天眼查高效采集企业数据的技术解析

Python网络爬虫实战：从天眼查高效采集企业数据的技术解析

1. 项目概述与核心价值 最近在做一个市场分析项目，需要批量获取一批目标公司的工商信息、股东构成和经营状况。手动去查？几百家公司，光是复制粘贴就能把人逼疯。这时候，网络爬虫就成了我的“救命稻草”，而天眼查作为国…

2026/8/13 12:10:42 阅读更多 →

日新闻

Visual Studio新建项目解决方案为空：系统性排查与修复指南

Visual Studio新建项目解决方案为空：系统性排查与修复指南

1. 问题现象与本质剖析如果你是一位.NET开发者，或者正准备踏入这个领域，那么Visual Studio（后面简称VS）绝对是你绕不开的伙伴。但有时候，这个伙伴会跟你开一个不大不小的玩笑：你满怀期待地点击“创建新项目…

2026/8/13 0:00:09 阅读更多 →
长春建设厅网站：普通人买房办事必看的真实指南与避坑攻略

长春建设厅网站：普通人买房办事必看的真实指南与避坑攻略

说实话，每次提起“长春建设厅网站”这几个字，我心里都挺有感触的。不是因为它有多高大上，也不是因为那里藏着什么不可告人的秘密，恰恰相反，是因为它太“接地气”了，或者说，它是咱们普通人想要在这个城市好好生活、安稳买房时，必须得翻过的一座“数据山”。很多新朋友第…

2026/8/13 0:00:09 阅读更多 →
Windows家庭版远程桌面多用户破解完整指南：RDPWrap终极解决方案

Windows家庭版远程桌面多用户破解完整指南：RDPWrap终极解决方案

Windows家庭版远程桌面多用户破解完整指南：RDPWrap终极解决方案 【免费下载链接】rdpwrap.ini RDPWrap.ini for RDP Wrapper Library by StasM 项目地址: https://gitcode.com/GitHub_Trending/rd/rdpwrap.ini 你是否曾为Windows家庭版无法支持多用户远程桌面…

2026/8/13 0:00:09 阅读更多 →

周新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/13 2:38:34 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/13 10:41:52 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/13 10:41:51 阅读更多 →

月新闻

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

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

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

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

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

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

2026/8/13 10:41: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/13 10:41:49 阅读更多 →