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

文章目录前言先看这个页面解决了什么问题页面结构速览关键状态是怎么组织的业务逻辑最值得看的函数第一段重点代码状态与数据入口第二段重点代码核心交互逻辑使用方法把页面跑起来之后怎么操作这个实现为什么值得借鉴可以继续优化的地方完整代码最后总结前言很多示例只能看热闹真正拿来写业务页时帮助有限。这个 多行文字跑马灯 不一样它的结构接近真实应用场景稍微整理一下就能迁移到自己的项目里。先看这个页面解决了什么问题这个案例主要解决三件事把多行文字跑马灯的核心数据集中托管在组件状态中。让用户在一个页面里完成查看、筛选、操作、反馈的完整闭环。用相对克制的 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:10}){// 第一行Row({space:8}){Text(热点)这里有几个很实用的判断标准State字段通常就是页面的驱动中心。如果一个字段一改界面就会立即跟着变化那它大概率就应该放进状态里。如果某个值完全可以通过已有状态算出来就更适合做计算属性。第二段重点代码核心交互逻辑真正决定这个页面“好不好用”的往往不是布局而是交互逻辑是否顺手。下面这段代码就是关键部分/** * 多行文字跑马灯 - 多行文字跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct MarqueeMultilineText{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 MarqueeMultilineText{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:10}){// 第一行Row({space:8}){Text(热点).fontSize(10).fontColor(#FFFFFF).backgroundColor(#F44336).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4)Marquee({start:true,step:4,loop:-1,fromStart:true,src:HarmonyOS NEXT 正式版发布带来全新体验和性能提升}).layoutWeight(1).height(32).fontSize(13).fontColor(#333333).backgroundColor(#FAFAFA).borderRadius(16)}.width(100%)// 第二行Row({space:8}){Text(科技).fontSize(10).fontColor(#FFFFFF).backgroundColor(DEMO_THEME_COLOR).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4)Marquee({start:true,step:5,loop:-1,fromStart:true,src:ArkUI 声明式开发框架让界面开发更加高效简洁}).layoutWeight(1).height(32).fontSize(13).fontColor(#333333).backgroundColor(#FAFAFA).borderRadius(16)}.width(100%)// 第三行Row({space:8}){Text(推荐).fontSize(10).fontColor(#FFFFFF).backgroundColor(PRESET_COLORS[0].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4)Marquee({start:true,step:3,loop:-1,fromStart:true,src:分布式技术让多设备协同更加流畅自然}).layoutWeight(1).height(32).fontSize(13).fontColor(#333333).backgroundColor(#FAFAFA).borderRadius(16)}.width(100%)// 第四行Row({space:8}){Text(新品).fontSize(10).fontColor(#FFFFFF).backgroundColor(PRESET_COLORS[1].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4)Marquee({start:true,step:6,loop:-1,fromStart:true,src:华为 Mate 70 系列正式开售搭载全新麒麟芯片}).layoutWeight(1).height(32).fontSize(13).fontColor(#333333).backgroundColor(#FAFAFA).borderRadius(16)}.width(100%)// 第五行Row({space:8}){Text(教程).fontSize(10).fontColor(#FFFFFF).backgroundColor(PRESET_COLORS[2].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4)Marquee({start:true,step:4,loop:-1,fromStart:true,src:从零开始学习 HarmonyOS ArkTS 应用开发系列教程}).layoutWeight(1).height(32).fontSize(13).fontColor(#333333).backgroundColor(#FAFAFA).borderRadius(16)}.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)}}最后总结多行文字跑马灯 这个案例并不靠复杂技巧取胜它更像一个结构扎实、逻辑完整的业务页面样板。把这篇文章里的状态设计、函数组织和页面分层吃透之后你再去写同类型功能速度会明显快很多。