#跟着若城学鸿蒙# UI组件篇-Gauge及其属性

最新推荐文章于 2025-05-20 23:40:55 发布
最新推荐文章于 2025-05-20 23:40:55 发布
阅读量1.1k 收藏 14
点赞数 32
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangyuan_xuan/article/details/148069779
版权

前言

在现代应用程序开发中，数据可视化是一个至关重要的环节。它不仅能够帮助用户更直观地理解数据，还能提升用户体验。ArkUI 作为华为推出的一个强大的 UI 框架，提供了丰富的组件来满足开发者的各种需求。其中，Gauge 组件是一个非常实用的数据量规图表组件，用于将数据展示为环形图表。本文将详细介绍 ArkUI 中的 Gauge 组件，包括其基本用法、属性、接口、子组件以及一些实际应用示例。

Gauge 组件简介

Gauge 组件是一个数据量规图表组件，用于将数据展示为环形图表。它支持多种自定义选项，如颜色、起始角度、终止角度等。从 API Version 8 开始支持，后续版本不断添加新特性，如隐私敏感模式和定制内容区。

基本用法

Gauge 组件的基本用法非常简单。通过创建一个 Gauge 实例并传入相应的参数来使用它。以下是一个基本的示例：


@Entry
@Component
struct GaugeExample {
  build() {
    Column() {
      Gauge({ value: 50, min: 0, 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)
        }.width('100%').height('100%')
      }
    }.width('100%').height('100%')
  }
}

在这个示例中，我们创建了一个 Gauge 实例，并设置了当前值为 50，最小值为 0，最大值为 100。Gauge 组件内部包含一个 Text 组件，用于显示当前值。

Gauge 组件的属性

Gauge 组件支持多种属性，以满足不同的自定义需求。以下是一些常用的属性：

value

value 属性用于设置量规图的数据值。它是必填参数，用于组件创建时量规图初始值的预置。如果 value 不在 min 和 max 范围内，将使用 min 作为默认值。

 
Gauge({ value: 50, min: 0, max: 100 })

startAngle

startAngle 属性用于设置起始角度位置。时钟 0 点为 0 度，顺时针方向为正角度。默认值为 0。

 
Gauge({ value: 50, min: 0, max: 100 }).startAngle(210)

endAngle

endAngle 属性用于设置终止角度位置。起始角度位置和终止角度位置差过小时，会绘制出异常图像，请取合理的起始角度位置和终止角度位置。默认值为 360。

 
Gauge({ value: 50, min: 0, max: 100 }).endAngle(150)

colors

colors 属性用于设置量规图的颜色。它支持多种类型，包括单色环、渐变环和分段渐变环。

 
Gauge({ value: 50, min: 0, max: 100 }).colors('#cca5d61d')

strokeWidth

strokeWidth 属性用于设置环形量规图的环形厚度。默认值为 4，单位为 vp。

 
Gauge({ value: 50, min: 0, max: 100 }).strokeWidth(18)

description

description 属性用于设置说明内容。它支持自定义文本内容或图片。

 
Gauge({ value: 50, min: 0, max: 100 }).description(this.descriptionBuilderImage)

trackShadow

trackShadow 属性用于设置阴影样式。阴影颜色与圆环颜色一致。设置 null 为不开启投影。

 
Gauge({ value: 50, min: 0, max: 100 }).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })

indicator

indicator 属性用于设置指针样式。它可以设置指针的图标和间距。

 
Gauge({ value: 50, min: 0, max: 100 }).indicator({ space: 10, icon: $r('app.media.indicator') })

privacySensitive

privacySensitive 属性用于设置隐私敏感模式。在隐私模式下，Gauge 指针指向 0 位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。

 
Gauge({ value: 50, min: 0, max: 100 }).privacySensitive(true)

contentModifier

contentModifier 属性用于定制 Slider 内容区的方法。开发者需要自定义 class 实现 ContentModifier 接口。

 
Gauge({ value: 50, min: 0, max: 100 }).contentModifier(new MyGaugeStyle(30, 10, 100))

Gauge 组件的接口

Gauge 组件提供了一系列接口，用于创建和配置 Gauge 实例。以下是一些常用的接口：

Gauge(options)

Gauge(options) 接口用于创建一个 Gauge 实例。它接受一个包含 value、min 和 max 等参数的对象。

 
Gauge({ value: 50, min: 0, max: 100 })

value(value)

value(value) 接口用于设置量规图的数据值。它是必填参数，用于动态修改量规图的数据值。

 
Gauge({ value: 50, min: 0, max: 100 }).value(60)

startAngle(angle)

startAngle(angle) 接口用于设置起始角度位置。

 
Gauge({ value: 50, min: 0, max: 100 }).startAngle(210)

endAngle(angle)

endAngle(angle) 接口用于设置终止角度位置。

 
Gauge({ value: 50, min: 0, max: 100 }).endAngle(150)

colors(colors)

colors(colors) 接口用于设置量规图的颜色。

 
Gauge({ value: 50, min: 0, max: 100 }).colors('#cca5d61d')

strokeWidth(length)

strokeWidth(length) 接口用于设置环形量规图的环形厚度。

 
Gauge({ value: 50, min: 0, max: 100 }).strokeWidth(18)

description(value)

description(value) 接口用于设置说明内容。

 
Gauge({ value: 50, min: 0, max: 100 }).description(this.descriptionBuilderImage)

trackShadow(value)

trackShadow(value) 接口用于设置阴影样式。

 
Gauge({ value: 50, min: 0, max: 100 }).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })

indicator(value)

indicator(value) 接口用于设置指针样式。

 
Gauge({ value: 50, min: 0, max: 100 }).indicator({ space: 10, icon: $r('app.media.indicator') })

privacySensitive(isPrivacySensitiveMode)

privacySensitive(isPrivacySensitiveMode) 接口用于设置隐私敏感模式。

 
Gauge({ value: 50, min: 0, max: 100 }).privacySensitive(true)

contentModifier(modifier)

contentModifier(modifier) 接口用于定制 Slider 内容区的方法。

 
Gauge({ value: 50, min: 0, max: 100 }).contentModifier(new MyGaugeStyle(30, 10, 100))

Gauge 组件的子组件

Gauge 组件可以包含单个子组件。建议使用文本组件构建当前数值文本和辅助文本。若子组件宽高为百分比形式，则基准范围为以外圆环做为内切圆的矩形。

 
@Entry
@Component
struct GaugeExample {
  build() {
    Column() {
      Gauge({ value: 50, min: 0, 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)
        }.width('100%').height('100%')
      }
    }.width('100%').height('100%')
  }
}

实际应用示例

示例 1：设置多色量规图

该示例通过 colors 接口，实现了多色量规图效果。

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

  build() {
    Column() {
      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)
        }.width('100%').height('100%')
      } .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]])
    }.width('100%').height('100%')
  }
}

示例 2：设置单色量规图

该示例通过 colors 接口，实现了单色量规图效果。

 
@Entry
@Component
struct Gauge2 {
  @Builder
  descriptionBuilderImage() {
    Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72)
  }

  build() {
    Column() {
      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)
        }.width('100%').height('100%')
      }
      .startAngle(210)
      .endAngle(150)
      .colors('#cca5d61d')
      .width('80%')
      .height('80%')
      .strokeWidth(18)
      .description(this.descriptionBuilderImage)
      .padding(18)
    }.margin({ top: 40 }).width('100%').height('100%')
  }
}

 

示例 3：设置定制说明区

该示例通过 description 接口，实现了说明区的设置功能。

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

  build() {
    Column() {
      Column() {
        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)
          }.width('100%').height('100%')
        }
        .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]])
        .width('80%')
        .height('80%')
        .strokeWidth(18)
        .description(this.descriptionBuilder)
        .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
        .padding(18)
      }.margin({ top: 40 }).width('100%').height('100%')
    }
  }
}

结论

ArkUI 中的 Gauge 组件是一个功能强大且灵活的数据量规图表组件。它支持多种自定义选项，如颜色、起始角度、终止角度等，能够满足开发者在不同场景下的需求。通过本文的介绍，相信读者对 Gauge 组件有了更深入的了解。希望本文能够帮助开发者在实际项目中更好地使用 ArkUI 的 Gauge 组件，提升应用的用户体验和数据展示效果。

----

以上

Huang兄
关注
#跟着若城学鸿蒙# UI组件篇-LoadingProgress及其属性
Huang兄
05-19 664
LoadingProgressInterface用于TypedFrameNode的initialize接口的入参LoadingProgressAttribute用于TypedFrameNode的attribute接口的返回值LoadingProgress是ArkUI中非常重要的反馈类组件，它能够有效提升用户体验，让用户明确知道系统正在处理中。LoadingProgress的基本用法和属性如何自定义LoadingProgress的外观和行为。
HarmonyOS学习(三)——UI（一）控件
qi85481455的博客
06-25 991
Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。Black是空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。需要注意的是，Black组件仅当其父组件为Row/Colum，且父容器设置宽度后才生效。多选框群组，用于控制多选框全选或者不全选状态，通过group表示同一个多选框群组。跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。多选框组件，在实例化时主要是设置多选框的名称，多选框的群组名称。
HarmonyOS实战开发：Gauge（基础组件）
2401_84194030的博客
06-05 1160
数据量规图表组件，用于将数据展示为环形图表。
鸿蒙 ArkUI - ArkTS 组件 官方 UI组件 合集
bestadc的博客
05-15 1128
ArkUI 组件速查表为鸿蒙应用开发者提供了一站式功能组件和布局的参考指南。开发者可以根据页面需求，快速定位所需组件，如选择、文本、信息等类型，或特定形状如块、图等。速查表涵盖了行列与堆叠、栅格与分栏、滚动与滑动、导航与切换、按钮与选择、文本与输入等多个类别的组件，每个组件都详细列出了其作用，方便开发者快速理解和应用。通过此速查表，开发者可以有效提高开发效率，减少重复造轮子的时间。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Gauge）
Androidbye的博客
01-19 820
数据量规图表组件，用于将数据展示为环形图表。
鸿蒙5.0版开发：ArkTS组件-LoadingProgress
m0_69424697的博客
11-17 965
用于显示加载动效的组件。
鸿蒙next开发：UI开发-焦点事件
qq_39652397的博客
05-19 852
本文详细介绍了鸿蒙HarmonyOS应用开发中的焦点管理机制，涵盖了焦点、焦点链、走焦等核心概念，以及焦点态、层级页面、根容器等关键特性。
鸿蒙应用--组件不显示在页面上的原因: 1.组件条件渲染销毁组件 2.通过visibility隐藏组件 3.组件缓存 //组件销毁的标志--触发aboutTodisappear
2401_88846919的博客
02-27 751
在鸿蒙（HarmonyOS）应用开发中，自定义组件的销毁与是否显示在页面上密切相关，但具体行为取决于。ArkUI 自定义组件的生命周期主要包括以下阶段（以。，则说明它即将被销毁。
鸿蒙HarmonyOS NEXT开发：自定义绘制设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 1059
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
【HarmonyOS NEXT】组件能力如何实现环形渐变效果
Mayism123的博客
04-26 571
升级API11版本，从API version 11开始，Gauge支持设置color属性：当参数类型为LinearGradient，则圆环类型为渐变环。LinearGradient可以设置单个吗？因为必须要传2个及以上值，但是渐变开始到结束只给了2个值，无法编辑成数组传递进去。API10版本中使用Gauge组件无法实现渐变效果，并且会有箭头显示，progress组件中已删除arc这种样式，无法实现UI要求。LinearGradient设置单个是因为只有一个色值组，从A到B这一个渐变色，箭头是可以隐藏的。
鸿蒙ArkUI组件库示例App—如何实现预览组件接口、属性调整的效果。
m0_70749039的博客
06-02 1133
ArkUI组件库示例App。包括基础组件、容器组件、弹窗组件，可以在预览器或真机中，实时预览组件接口、属性调整的效果。
鸿蒙NEXT开发动画案例10
鸿蒙布道师
05-16 1159
本文介绍了如何在鸿蒙系统中创建一个名为SpinTen的动画组件。首先，在Page文件夹下新建Spin.ets文件，定义了一个包含旋转动画的组件，通过Grid布局和Canvas绘制实现动画效果。接着，修改Index.ets文件，引入并调用SpinTen组件，设置其大小和颜色。最后，运行项目并登录华为账号进行签名，即可看到动画效果。该动画通过Keyframe动画实现，具有平滑的缩放和位移效果，适用于加载或等待场景。
鸿蒙5.0项目开发——鸿蒙天气项目的实现（主页2）
高心星的专栏
05-16 240
这是一个基于 HarmonyOS 开发的天气应用，提供实时天气查询、天气预报和城市搜索等功能。
HarmonyOS 开发之 —— 合理使用动画与转场
this_is_bug的博客
05-16 201
本文介绍了在HarmonyOS开发中如何合理使用动画与转场效果，以提升用户体验。首先，文章详细讲解了属性动画（Property Animation），包括其核心组件如Animator、ValueAnimator、ObjectAnimator，以及插值器和估值器的作用。通过代码示例展示了如何实现视图位置移动、组合动画（缩放与透明度变化）以及自定义属性动画。接着，文章探讨了转场动画（Transition Animation），分为简单转场和带共享元素的转场，并提供了页面滑动切换和图片点击放大进入新页面的具体实现
鸿蒙HarmonyOS多设备流转：分布式的智能协同技术介绍
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-20 631
随着物联网和智能设备的普及，多设备间的无缝协作变得越来越重要。鸿蒙（HarmonyOS）作为华为推出的新一代操作系统，其分布式技术为实现多设备流转提供了强大的支持。本文将详细介绍鸿蒙多设备流转的技术原理、实现方式和应用场景。
HarmonyOS应用开发入门宝典——项目驱动学习法实践
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-20 1201
学习新技能，尤其是鸿蒙开发，最有效的方法是动手实践。项目驱动学习法（PBL）通过实际项目目标引导，帮助开发者主动探索知识，将碎片化的技能点串联成完整的知识体系。传统学习模式往往导致知识与应用脱节，而PBL则通过全流程闭环、知识体系化和问题解决能力的提升，有效应对这一挑战。鸿蒙开发的特殊性，如跨设备特性、ArkUI框架和分布式能力，进一步凸显了PBL的优势。通过从零构建一个社区类应用，开发者可以经历需求分析、架构设计、编码实现、调试优化、打包发布等完整开发周期，从而快速掌握鸿蒙开发的核心技能。
初步认识HarmonyOS NEXT端云一体化开发
白晓明的博客
05-20 545
本课程以"四维能力成长模型"为核心设计理念，通过"能看懂→能听懂→能上手→能实战"的渐进式学习路径，帮助零基础开发者掌握端云一体化开发技能。课程以"宝宝喂养记录"为教学载体，采用项目驱动教学法，培养学员从需求分析到部署维护的全栈能力。课程特色包括全栈能力培养、项目驱动教学和渐进式学习路径，适合HarmonyOS开发初学者、前端工程师转岗者及创业者。
鸿蒙OS&UniApp 实现的地图定位与导航功能#三方框架 #Uniapp
小淼淼的博客
05-15 1029
最近在做一个外勤签到应用，需要实现地图定位、标记和导航功能。由于产品需要覆盖安卓、iOS、鸿蒙等多个平台，我们选择了UniApp作为开发框架。其中对鸿蒙系统的适配是一个新挑战，经过一番摸索，总结出了一套可行的实现方案，今天就把这个过程分享给大家。通过本文，我们详细介绍了如何在UniApp框架下实现地图定位与导航功能，并针对鸿蒙系统进行了适配。基础地图组件：使用UniApp的map组件实现地图展示与交互定位功能：获取用户当前位置并显示在地图上标记功能：在地图上添加与管理标记点导航功能。
鸿蒙OS&UniApp制作支持多图上传的图片选择器：打造高性能移动端上传体验#三方框架 #Uniapp
小淼淼的博客
05-16 567
支持多图选择与预览智能压缩，优化传输性能可靠的上传队列管理完善的失败重试机制鸿蒙系统深度适配自定义图片裁剪功能添加水印处理优化大图片加载实现拖拽排序图片上传是一个看似简单但实际涉及诸多技术点的功能，需要我们在性能、体验和可靠性之间找到平衡。通过本文的实践，相信大家已经掌握了实现一个专业图片上传组件的核心要点。在实际开发中，还需要根据具体场景进行调整和优化。希望本文对大家有所帮助，也欢迎在评论区分享你的开发经验！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值