企业官网建设流程全解析

组件概述

Gauge（仪表盘组件）是 HarmonyOS 6 提供的环形可视化组件，专为数值占比、指标度量等场景设计，支持自定义角度范围、渐变色彩分段、文本叠加、阴影效果等丰富样式配置。

核心 API 与参数

1. 组件构造参数

2. 核心样式属性

3. 辅助枚举/类型

示例代码功能说明

示例实现一个高度定制化的多色渐变仪表盘：

1. 基础数值展示：当前值50（范围1~100），中心叠加核心数值文本+辅助文本；
2. 角度定制：起始角210°、结束角150°，形成240°的环形仪表盘（非完整圆形）；
3. 多色渐变：按阈值9~1划分9个线性渐变色彩段，覆盖从紫色到蓝色的渐变区间；
4. 样式增强：设置环形宽度18vp、阴影效果，添加自定义说明文本；
5. 文本适配：核心文本支持字体大小自适应（30~60vp），溢出时显示省略号。

代码逐段解析

1. 自定义描述文本构建器

@Builder descriptionBuilder() { Text('说明文本') .maxFontSize('30sp') .minFontSize('10.0vp') .fontColor('#fffa2a2d') .fontWeight(FontWeight.Medium) .width('100%') .height('100%') .textAlign(TextAlign.Center) }

关键说明：

• 使用@Builder自定义可复用的文本布局，作为仪表盘的描述文本；
• 字体大小支持自适应（10vp~30sp），适配不同尺寸设备；
• 文本居中显示，颜色为红色（#fffa2a2d），字体中等粗细。

2. 布局容器

build() { Column() { // Gauge核心组件 Gauge(...) { ... } // 样式配置 .width('80%').height('80%').margin({ top: 40 }) }.width('100%').height('100%') }

关键说明：

• 整体采用Column纵向布局，Gauge 组件占父容器80%宽高，顶部间距40vp；
• 宽高设为相同比例，保证仪表盘为正圆形，避免拉伸变形。

3. Gauge 核心配置

Gauge({ value: 50, min: 1, max: 100 }) { Column() { Text('50') .fontWeight(FontWeight.Medium) .width('62%') .fontColor('#ff182431') .maxFontSize('60.0vp') .minFontSize('30.0vp') .textAlign(TextAlign.Center) .margin({ top: '35%' }) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) Text('辅助文本') .maxFontSize('16.0fp') .minFontSize('10.0vp') .fontColor($r('sys.color.ohos_id_color_text_secondary')) .fontWeight(FontWeight.Regular) .width('67.4%') .height('9.5%') .textAlign(TextAlign.Center) }.width('100%').height('100%') }

关键说明：

• 子组件Column实现仪表盘中心文本叠加，包含“核心数值（50）+辅助文本”两层内容；
• 核心数值文本：字体大小自适应（30~60vp），宽度62%，顶部间距35%，溢出时显示省略号；
• 辅助文本：使用系统二级文本色（$r('sys.color.ohos_id_color_text_secondary')），适配系统主题，字体常规粗细。

4. Gauge 样式定制

.value(50) .startAngle(210) .endAngle(150) .colors([[new LinearGradient([{ color: '#deb6fb', offset: 0 }, { color: '#ac49f5', offset: 1 }]), 9], [new LinearGradient([{ color: '#bbb7fc', offset: 0 }, { color: '#564af7', offset: 1 }]), 8], [new LinearGradient([{ color: '#f5b5c2', offset: 0 }, { color: '#e64566', offset: 1 }]), 7], [new LinearGradient([{ color: '#f8c5a6', offset: 0 }, { color: '#ed6f21', offset: 1 }]), 6], [new LinearGradient([{ color: '#fceb99', offset: 0 }, { color: '#f7ce00', offset: 1 }]), 5], [new LinearGradient([{ color: '#dbefa5', offset: 0 }, { color: '#a5d61d', offset: 1 }]), 4], [new LinearGradient([{ color: '#c1e4be', offset: 0 }, { color: '#64bb5c', offset: 1 }]), 3], [new LinearGradient([{ color: '#c0ece5', offset: 0 }, { color: '#61cfbe', offset: 1 }]), 2], [new LinearGradient([{ color: '#b5e0f4', offset: 0 }, { color: '#46b1e3', offset: 1 }]), 1]]) .strokeWidth(18) .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) .description(this.descriptionBuilder) .padding(18)

关键说明：

• startAngle(210)+endAngle(150)：形成240°的环形范围（覆盖左下到右下的弧形）；
• colors：配置9个线性渐变分段，每个分段对应不同阈值（9~1），实现从紫到蓝的渐变效果；
• strokeWidth(18)：设置环形线条宽度为18vp，保证视觉醒目；
• trackShadow：添加阴影效果（模糊半径7vp，向右下偏移7vp），提升立体感；
• description：绑定自定义描述文本构建器，展示“说明文本”；
• padding(18)：组件内边距18vp，避免内容溢出。

运行效果

1. 整体外观：80%宽高的环形仪表盘，240°弧形范围，线条宽度18vp，带右下方向阴影；
2. 色彩效果：环形按阈值9~1划分9个线性渐变段，从浅紫→深紫→浅粉→橙→黄→绿→浅蓝→深蓝过渡；
3. 数值展示：中心显示大号“50”（自适应字体），下方显示灰色“辅助文本”，整体居中；
4. 描述文本：仪表盘下方显示红色居中的“说明文本”，字体大小自适应；
5. 交互适配：核心数值文本溢出时显示省略号，全尺寸适配不同设备。

运行效果如图：

总结

基于示例可扩展的实用功能：

1. 动态数值：将value绑定@State变量，实现数值实时刷新（如传感器数据、进度更新）；
2. 自定义阈值色：根据业务调整colors数组的阈值和渐变色（如告警阈值设为红色）；
3. 动画效果：添加.animation({ duration: 1000 })实现数值变化时的环形动画；
4. 多语言适配：将“说明文本”“辅助文本”替换为系统资源（$r('app.string.xxx')）；
5. 交互事件：添加点击/滑动事件，实现手动调整仪表盘数值。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力