HarmonyOS7自定义样式跑马灯实战：Marquee 样式定制与视觉层次设计

前言

跑马灯这个组件，很多人第一反应就是“让文字滚起来”。但真正放进业务里，决定页面质感的往往不是滚动本身，而是字体、背景、边框和间距这些视觉细节。这个案例适合拿来练一遍 Marquee 的样式定制能力。 我自己看这类案例时，通常不会先背属性，而是先判断它到底在解决什么页面问题。这个习惯很有用，因为一旦知道“它是给谁用、解决什么场景”，后面的代码就不容易看散。

别看这个案例篇幅不算长，但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻，还是准备拆成自己的业务组件，都会更顺。

这类写法尤其适合落在 公告条、活动横幅、品牌信息提示、内容运营位 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

先把这页在干什么看明白

我建议先不要着急顺着源码往下滚。先回答一个更实际的问题：自定义样式跑马灯 这个页面，用户一进来第一眼会看到什么，接着又会去操作哪里。结构感一旦建立起来，后面的代码就不容易看散。

这一页没有额外拆出接口，页面更多是直接围绕基础数据和组件参数展开。

这篇我会按“先看到什么、再点什么、最后哪里变化”的顺序去讲，适合第一次复刻这个案例时照着走。

状态字段不多，但分工要清楚

这一页虽然只有一个isShow，但不代表它没有结构可讲。样式定制类页面经常是这样：显式状态很少，真正的差异主要藏在配置组合里。也就是说，这篇更适合拿来训练你对“视觉参数分层”的敏感度。

• isShow在这里只负责页面显隐，本身不是重点。
• 真正的“隐性状态”，其实是每一种跑马灯样式背后那套视觉配置：字号、字重、背景色、圆角、边框、阴影、内边距，以及滚动速度本身。

如果把这些配置当成一组可管理的样式状态，这页就会一下子变得更像真实业务代码：

• 大字主题色那组更像强提醒公告。
• 描边样式更适合轻量信息条或品牌说明。
• 暗色和渐变方案更接近活动位、专题位这类有氛围要求的区域。

所以这篇最值得你学的，不只是“怎么把样式写出来”，而是“怎么让不同视觉语气服务不同信息层级”。这一步想通了，后面你做运营条、通知条、品牌横幅时就不会只剩下换颜色这一个动作。

哪几个函数最值得先看

读函数别贪多。对 自定义样式跑马灯 这种页面来说，真正有阅读价值的往往是那几段会改状态、触发交互或者推动页面切换的逻辑。

• 这个案例没有太多额外方法，核心价值主要集中在页面结构和组件组合方式。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column({space:16}){Text('自定义样式跑马灯').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('通过属性设置自定义跑马灯的颜色、字号和背景').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 样式1：大字主题色Column({space:6}){Text('样式一：大字主题色').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

• @State字段到底在控制显示、选择、跳转结果还是模式切换。
• 默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
• 字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

样式定制页最容易被误读成“只是把几组参数平铺出来”。其实真正决定观感差异的，不是某一个单独属性，而是这些属性有没有一起朝同一个视觉目标服务。这段结构就是在做这件事。

/** * 自定义样式跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'@Entry@Componentstruct MarqueeCustomStyleShowcase{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column({space:16}){Text('自定义样式跑马灯').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('通过属性设置自定义跑马灯的颜色、字号和背景').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')

你可以把这里的阅读重点放在“样式组合”而不是“单个属性”上：

1. 信息层级怎么建立：字号、字重和颜色先决定这是主标题感、说明感，还是弱提示感。
2. 容器气质怎么塑造：背景、圆角、边框和阴影一起决定它更像公告条、活动横幅，还是品牌提示条。
3. 滚动节奏怎么配合视觉：速度快慢不是独立参数，它会影响页面整体语气。醒目的红底快滚和浅色慢滚，传达出来的情绪完全不一样。

很多项目里跑马灯之所以显得廉价，不是因为组件不够强，而是样式参数各管各的，没有形成一套一致语气。把这段理解透，你就会知道为什么同样是滚动文本，有的像系统通知，有的像活动 banner，还有的像品牌口号位。

把页面跑起来之后，建议你这样操作一遍

文章讲再多，都不如自己把页面点一遍。尤其是 自定义样式跑马灯 这种带明显交互结果的页面，只看代码很难建立手感。

1. 先进入页面，确认首屏是不是把自定义样式跑马灯的主题交代清楚。
2. 盯住核心展示区，观察默认状态下最醒目的内容是什么。
3. 主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
4. 回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
5. 最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

如果我把它迁进正式项目

示例页最大的风险，就是你觉得“这不难”，结果真要迁进项目里，发现数据、样式、交互边界全要补。这里提前把这些坑说开。

• 公告条类页面别只盯滚动，字号、留白、边框和底色往往更影响可读性。
• 如果后面要接运营文案，最好把内容源和样式配置拆开，避免每次改文案都动布局代码。
• 只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
• 示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

这个案例为什么值得留一份

它真正值得保留的地方，不只是效果能跑出来，而是写法相对克制。你以后回来翻，会发现它很适合当中间层模板。

• 页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
• 状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
• 组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/** * 自定义样式跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'@Entry@Componentstruct MarqueeCustomStyleShowcase{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column({space:16}){Text('自定义样式跑马灯').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('通过属性设置自定义跑马灯的颜色、字号和背景').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 样式1：大字主题色Column({space:6}){Text('样式一：大字主题色').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,step:4,loop:-1,fromStart:true,src:'大号字体 + 主题色背景 + 白色文字'}).width('100%').height(48).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor(DEMO_THEME_COLOR).borderRadius(24).padding({left:20})}.width('100%')// 样式2：描边风格Column({space:6}){Text('样式二：描边风格').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,step:5,loop:-1,fromStart:true,src:'无边背景 + 主题色描边 + 深色文字'}).width('100%').height(40).fontSize(15).fontColor(DEMO_THEME_COLOR).backgroundColor('#FFFFFF').border({width:2,color:DEMO_THEME_COLOR,radius:20})}.width('100%')// 样式3：渐变效果（用纯色模拟）Column({space:6}){Text('样式三：渐变色背景').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,step:3,loop:-1,fromStart:true,src:'精致浅色背景 + 深色字体 + 圆角胶囊'}).width('100%').height(40).fontSize(14).fontColor('#333333').backgroundColor('#E8EAF6').borderRadius(20).shadow({radius:8,color:'#C5CAE9',offsetY:2})}.width('100%')// 样式4：暗色风格Column({space:6}){Text('样式四：暗色风格').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,step:4,loop:-1,fromStart:true,src:'深色背景 + 亮色文字 + 现代风格'}).width('100%').height(40).fontSize(14).fontColor('#00E5FF').backgroundColor('#263238').borderRadius(20)}.width('100%')// 样式5：品牌色Column({space:6}){Text('样式五：多彩品牌色').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Marquee({start:true,step:6,loop:-1,fromStart:true,src:'红色醒目背景 + 白色粗体 + 快速滚动'}).width('100%').height(40).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#E53935').borderRadius(20)}.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)}}

收个尾

自定义样式跑马灯 这一页我建议你至少亲手改一次。哪怕只是换一组数据、调一个布局、补一个状态字段，你都会比只看文章更快进入自己的节奏。