文章目录组件概述核心 API 与参数1. 组件构造参数2. 核心样式属性3. 辅助枚举/类型示例代码功能说明代码逐段解析1. 自定义描述文本构建器2. 布局容器3. Gauge 核心配置4. Gauge 样式定制运行效果总结组件概述Gauge仪表盘组件是 HarmonyOS 6 提供的环形可视化组件专为数值占比、指标度量等场景设计支持自定义角度范围、渐变色彩分段、文本叠加、阴影效果等丰富样式配置。核心 API 与参数1. 组件构造参数参数名类型必填说明valuenumber是仪表盘当前数值示例中为50minnumber是数值最小值示例中为1maxnumber是数值最大值示例中为1002. 核心样式属性属性名类型说明startAnglenumber仪表盘起始角度示例中210°角度以顺时针为正0°为右侧水平方向endAnglenumber仪表盘结束角度示例中150°与起始角度配合形成环形范围colorsArray[Gradient | string, number]颜色分段配置- 第一项渐变/纯色值- 第二项分段阈值示例中按9/8/7…1划分9个渐变段strokeWidthnumber仪表盘环形线条宽度示例中18vptrackShadow{radius: number, offsetX: number, offsetY: number}环形阴影效果-radius阴影模糊半径-offsetX/Y阴影偏移量description() void仪表盘描述文本构建器通过Builder自定义width/heightstring/number组件宽高示例中设为父容器80%建议宽高一致paddingnumber组件内边距示例中18vp3. 辅助枚举/类型类型名说明示例LinearGradient线性渐变配置new LinearGradient([{ color: #deb6fb, offset: 0 }, { color: #ac49f5, offset: 1 }])TextOverflow文本溢出处理TextOverflow.Ellipsis超出显示省略号FontWeight字体粗细FontWeight.Medium中等/FontWeight.Regular常规示例代码功能说明示例实现一个高度定制化的多色渐变仪表盘基础数值展示当前值50范围1~100中心叠加核心数值文本辅助文本角度定制起始角210°、结束角150°形成240°的环形仪表盘非完整圆形多色渐变按阈值9~1划分9个线性渐变色彩段覆盖从紫色到蓝色的渐变区间样式增强设置环形宽度18vp、阴影效果添加自定义说明文本文本适配核心文本支持字体大小自适应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避免内容溢出。运行效果整体外观80%宽高的环形仪表盘240°弧形范围线条宽度18vp带右下方向阴影色彩效果环形按阈值9~1划分9个线性渐变段从浅紫→深紫→浅粉→橙→黄→绿→浅蓝→深蓝过渡数值展示中心显示大号“50”自适应字体下方显示灰色“辅助文本”整体居中描述文本仪表盘下方显示红色居中的“说明文本”字体大小自适应交互适配核心数值文本溢出时显示省略号全尺寸适配不同设备。运行效果如图总结基于示例可扩展的实用功能动态数值将value绑定State变量实现数值实时刷新如传感器数据、进度更新自定义阈值色根据业务调整colors数组的阈值和渐变色如告警阈值设为红色动画效果添加.animation({ duration: 1000 })实现数值变化时的环形动画多语言适配将“说明文本”“辅助文本”替换为系统资源$r(app.string.xxx)交互事件添加点击/滑动事件实现手动调整仪表盘数值。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力