HarmonyOS ArkUI Marquee 跑马灯与 Gauge 仪表盘：公告滚动与数据展示

系列鸿蒙 HarmonyOS 6.1 新特性实战 · 第 43 篇Marquee 实现水平滚动文字效果常用于新闻公告条、优惠信息滚动展示Gauge 是半圆或弓形仪表盘组件适合可视化速度、电量、得分等数值。本篇将两者结合搭建一个带播控按钮的公告条与实时数据仪表盘示例页面覆盖颜色分段、中心文字叠加等进阶用法。运行效果初始状态Marquee 停止 Gauge 显示默认值Marquee 滚动中 点击按钮更新 Gauge 数值Marquee 跑马灯Marquee 通过start属性控制滚动状态step控制每帧移动像素数loop控制循环次数。State marqueeStart: boolean false State marqueeStep: number 8 Marquee({ start: this.marqueeStart, step: this.marqueeStep, loop: -1, fromStart: true, src: HarmonyOS 6.1 正式发布新增 Marquee、Gauge、Search 等多个 ArkUI 组件欢迎体验 }) .fontSize(14) .fontColor(#333333) .layoutWeight(1) .height(36)参数说明start: false初始暂停start: true立即开始滚动step每帧移动像素数6-10 为舒适速度超过 15 会感觉很快loop: -1无限循环loop: 0播放一次后停止fromStart: true每次循环从头开始false则接续当前位置将 Marquee 嵌入公告条容器Row({ space: 8 }) { Text(公告).fontSize(12).fontColor(#ff6600) .padding({ left: 6, right: 6, top: 3, bottom: 3 }) .backgroundColor(#fff3e0) .borderRadius(4) Marquee({ start: this.marqueeStart, step: this.marqueeStep, loop: -1, fromStart: true, src: this.marqueeText }) .fontSize(14).fontColor(#333333).layoutWeight(1).height(36) Image(this.marqueeStart ? $r(app.media.pause) : $r(app.media.play)) .width(20).height(20) .onClick(() { this.marqueeStart !this.marqueeStart }) } .width(100%) .padding({ left: 12, right: 12 }) .height(44) .backgroundColor(#fffbf0) .borderRadius(8)Gauge 仪表盘Gauge 以弓形刻度盘展示数值startAngle和endAngle以时钟方向定义弧度范围0 12点90 3点180 6点270 9点。State gaugeVal: number 65 Gauge({ value: this.gaugeVal, min: 0, max: 100 }) .startAngle(210) .endAngle(150) .strokeWidth(18) .description(null) .width(200) .height(200)startAngle(210)对应左下方约 7 点位endAngle(150)对应右下方约 5 点位两者组合形成经典的 270° 弓形仪表盘。Gauge 颜色分段通过.colors()传入颜色区间数组实现红/黄/绿三段渐变直观表达数值健康程度Gauge({ value: this.gaugeVal, min: 0, max: 100 }) .colors([ [Color.Red, 0.3], [Color.Yellow, 0.4], [Color.Green, 0.3] ]) .startAngle(210) .endAngle(150) .strokeWidth(18) .description(null) .width(200) .height(200)每个元素为[颜色, 占比]占比之和应为 1.0对应刻度盘从起点到终点的比例分配。Stack 叠加中心文字使用Stack将文字叠加在 Gauge 中心实现数值直读效果Stack() { Gauge({ value: this.gaugeVal, min: 0, max: 100 }) .colors([ [Color.Red, 0.3], [Color.Yellow, 0.4], [Color.Green, 0.3] ]) .startAngle(210) .endAngle(150) .strokeWidth(18) .description(null) .width(200) .height(200) Column({ space: 2 }) { Text(${this.gaugeVal}) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(this.getValueColor()) Text(分).fontSize(13).fontColor(#999999) } .offset({ y: 16 }) } .width(200) .height(200)颜色动态映射getValueColor(): string { if (this.gaugeVal 30) return #e74c3c if (this.gaugeVal 70) return #f39c12 return #27ae60 }完整代码Entry Component struct MarqueeGaugePage { State marqueeStart: boolean false State marqueeStep: number 8 State marqueeText: string HarmonyOS 6.1 正式发布新增 Marquee、Gauge、Search 等多个 ArkUI 组件欢迎体验新特性 State gaugeVal: number 65 State speedLabel: string 良好 getValueColor(): string { if (this.gaugeVal 30) return #e74c3c if (this.gaugeVal 70) return #f39c12 return #27ae60 } updateGauge(delta: number): void { const next this.gaugeVal delta this.gaugeVal Math.max(0, Math.min(100, next)) if (this.gaugeVal 30) { this.speedLabel 危险 } else if (this.gaugeVal 70) { this.speedLabel 一般 } else { this.speedLabel 良好 } } build() { Column({ space: 20 }) { Text(公告栏 仪表盘).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#333333) .width(100%).padding({ left: 16 }) // 公告条 Row({ space: 8 }) { Text(公告) .fontSize(12).fontColor(#ff6600) .padding({ left: 6, right: 6, top: 3, bottom: 3 }) .backgroundColor(#fff3e0).borderRadius(4) Marquee({ start: this.marqueeStart, step: this.marqueeStep, loop: -1, fromStart: true, src: this.marqueeText }) .fontSize(14).fontColor(#333333).layoutWeight(1).height(36) Text(this.marqueeStart ? ⏸ : ▶) .fontSize(18) .onClick(() { this.marqueeStart !this.marqueeStart }) } .width(100%) .padding({ left: 12, right: 12 }) .height(44) .backgroundColor(#fffbf0) .borderRadius(8) .margin({ left: 16, right: 16 }) // 速度调节 Row({ space: 12 }) { Text(滚动速度).fontSize(13).fontColor(#666666) ForEach([4, 8, 16], (step: number) { Text(${step 4 ? 慢 : step 8 ? 中 : 快}) .fontSize(13) .fontColor(this.marqueeStep step ? #ffffff : #0066ff) .padding({ left: 14, right: 14, top: 6, bottom: 6 }) .backgroundColor(this.marqueeStep step ? #0066ff : #e8f0ff) .borderRadius(16) .onClick(() { this.marqueeStep step }) }) } .padding({ left: 16, right: 16 }) Divider().strokeWidth(1).color(#eeeeee).margin({ left: 16, right: 16 }) // 仪表盘 Text(实时评分).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#333333) .width(100%).padding({ left: 16 }) Stack() { Gauge({ value: this.gaugeVal, min: 0, max: 100 }) .colors([ [Color.Red, 0.3], [Color.Yellow, 0.4], [Color.Green, 0.3] ]) .startAngle(210) .endAngle(150) .strokeWidth(18) .description(null) .width(220) .height(220) Column({ space: 2 }) { Text(${this.gaugeVal}) .fontSize(40) .fontWeight(FontWeight.Bold) .fontColor(this.getValueColor()) Text(this.speedLabel) .fontSize(14) .fontColor(this.getValueColor()) } .offset({ y: 20 }) } .width(220) .height(220) // 控制按钮 Row({ space: 16 }) { Button(-10).width(72).onClick(() { this.updateGauge(-10) }) Button(-1).width(60).onClick(() { this.updateGauge(-1) }) Button(1).width(60).onClick(() { this.updateGauge(1) }) Button(10).width(72).onClick(() { this.updateGauge(10) }) } } .width(100%) .height(100%) .backgroundColor(#f8f8f8) .padding({ top: 20, bottom: 20 }) } }API 速查属性/方法说明Marquee({ start, step, loop, fromStart, src })创建滚动文字src 为文字内容starttrue 滚动false 暂停step每帧移动像素数推荐 6-10loop循环次数-1 无限0 播放一次fromStarttrue 每次从头播放Gauge({ value, min, max })创建仪表盘value 为当前值.startAngle(deg)弧度起始角时钟方向012点.endAngle(deg)弧度终止角.strokeWidth(px)刻度盘弧线粗细.colors([[color, ratio], ...])颜色分段数组ratio 之和为 1.0.description(null)传 null 隐藏默认描述文字小结Marquee 的start属性绑定State变量修改即可在运行时控制播放/暂停step值越大滚动越快6-10 在大多数屏幕密度下视觉舒适超过 15 会显得跳跃Gauge 角度遵循时钟方向startAngle(210)endAngle(150)组合出 270° 弓形颜色分段数组中各ratio之和必须等于 1.0否则仪表盘颜色显示异常使用Stack Column offset叠加中心文字无需绝对定位适配不同屏幕尺寸description(null)可隐藏 Gauge 默认描述区域腾出空间给自定义内容上一篇QRCode 与 PatternLock 安全组件 | 下一篇Menu 与 ContextMenu 长按菜单全配置