鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Gauge）

数据量规图表组件，用于将数据展示为环形图表。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

说明：

建议使用文本组件构建当前数值文本和辅助文本。

若子组件宽高为百分比形式，则基准范围为以外圆环做为内切圆的矩形。

接口

Gauge(options:{value: number, min?: number, max?: number})

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名参数类型必填参数描述
valuenumber是量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。
说明：
value不在min和max范围内时使用min作为默认值。
minnumber否当前数据段最小值。
默认值：0
maxnumber否当前数据段最大值。
默认值：100
说明：
max小于min时使用默认值0和100。
max和min支持负数。

属性

除支持通用属性外，还支持以下属性：

名称参数类型描述
valuenumber设置量规图的数据值，可用于动态修改量规图的数据值。
默认值：0
从API version 9开始，该接口支持在ArkTS卡片中使用。
startAnglenumber设置起始角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：0
从API version 9开始，该接口支持在ArkTS卡片中使用。
endAnglenumber设置终止角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：360
从API version 9开始，该接口支持在ArkTS卡片中使用。
colorsResourceColor11+ | LinearGradient11+ | Array<ColorStop>设置量规图的颜色，支持分段颜色设置。
API version 9 默认值：Color.Black
从API version 9开始，该接口支持在ArkTS卡片中使用。
从API version 11开始，该接口使用以下规则：
参数类型为ResourceColor，则圆环类型为单色环。
参数类型为LinearGradient，则圆环类型为渐变环。
参数类型为数组，则圆环类型为分段渐变环。
分段渐变环最大显示段数为9段，若多于9段，则多于部分不显示。
API version 11默认值：
若不传颜色，或者数组为空，无法确定圆环类型及颜色，则圆环颜色为"0xFF64BB5C"、"0xFFF7CE00"、"0xFFE84026"的渐变环。
若传入颜色，但颜色值有误，则该颜色为"0xFFE84026"。
strokeWidthLength设置环形量规图的环形厚度。
默认值：4
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
设置小于0的值时，按默认值显示。
不支持百分比。
description11+CustomBuilder设置说明文本。
说明：
@Builder中的内容由开发者自定义，建议使用文本或者图片。
若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%*25.4%的矩形（图片为28.6%*28.6%），距离圆环底部0vp，左右居中。
设置null则不显示内容。
不设置则依赖是否设置数据最大最小值。
若设置最大最小值或者只设置其中一个，则显示最大最小值。
若未设置最大最小值，则不显示内容。
最大最小值显示在圆环底部，位置不可移动，若圆环开口角度设置不恰当，存在圆环遮挡文字的情况。
trackShadow11+GaugeShadowOptions设置阴影样式。
说明：
阴影颜色与圆环颜色一致。
设置null为不开启投影。
indicator11+GaugeIndicatorOptions设置指针样式。
说明：
设置null则不显示指针。

ColorStop

颜色断点类型，用于描述渐进色颜色断点。

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称类型定义描述
ColorStop[ResourceColor | LinearGradient11+, number]描述渐进色颜色断点类型，第一个参数为颜色值，若设置为非颜色类型，则置为"0xFFE84026"。第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0。

GaugeShadowOptions11+对象说明

名称参数类型必填描述
radiusnumber | Resource否投影模糊半径。
默认值：20
单位：vp
说明：
设置小于等于0的值时，按默认值显示。
offsetXnumber | Resource否X轴的偏移量。
默认值：5
单位：vp
offsetYnumber | Resource否Y轴的偏移量。
默认值：5
单位：vp

GaugeIndicatorOptions11+对象说明

名称参数类型必填描述
iconResource否图标资源路径。
说明：
不配置则使用默认的三角形样式指针。
支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。
spaceDimension否指针距离圆环外边的间距。(不支持百分比)
默认值：8
单位：vp
说明：
对于默认的三角形样式指针，间距为黑色三角形到圆环外边的间距。
若设置值小于0，则使用默认值。
若设置值大于圆环半径，则使用默认值。

示例

示例1

示例使用当前数值、说明文本、辅助文本。

@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)Text('辅助文本').maxFontSize("16.0fp").minFontSize("10.0vp").fontColor($r('sys.color.ohos_id_color_text_secondary')).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%')}.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]]).width('80%').height('80%').strokeWidth(18).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).description(this.descriptionBuilder).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}

gauge

示例2

示例使用当前数值、图标。

@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%')}
}

gauge

示例3

示例使用当前数值、说明文本。

@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%')}}
}

gauge

示例4

示例使用当前数值、辅助文本。

@Entry
@Component
struct Gauge4 {build() {Column() {Gauge({ value: 50, min: 1, max: 100 }) {Column() {Text('50').maxFontSize("72.0vp").minFontSize("10.0vp").fontColor("#ff182431").width('40%').textAlign(TextAlign.Center).margin({ top: '35%' }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)Text('辅助文本').maxFontSize("30.0vp").minFontSize("18.0vp").fontWeight(FontWeight.Medium).fontColor($r('sys.color.ohos_id_color_text_secondary')).width('62%').height('15.9%').textAlign(TextAlign.Center)}.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(null).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}

gauge

示例5

示例使用当前数值、最大最小数值。

@Entry
@Component
struct Gauge5 {build() {Column() {Gauge({ value: 50, min: 1, max: 100 }) {Column() {Text('50').maxFontSize("80sp").minFontSize("60.0vp").fontWeight(FontWeight.Medium).fontColor("#ff182431").width('40%').height('30%').textAlign(TextAlign.Center).margin({ top: '22.2%' }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)}.width('100%').height('100%')}.startAngle(225).endAngle(135).colors(new LinearGradient([{ color: "#e84026", offset: 0 },{ color: "#f7ce00", offset: 0.6 },{ color: "#64bb5c", offset: 1 }])).width('80%').height('80%').strokeWidth(18).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}

gauge

示例6

示例使用当前数值、最大最小数值、辅助文本。

@Entry
@Component
struct Gauge6 {build() {Column() {Gauge({ value: 50, min: 1, max: 100 }) {Column() {Text('50').maxFontSize('60sp').minFontSize('30.0vp').fontWeight(FontWeight.Medium).fontColor("#ff182431").width('62%').textAlign(TextAlign.Center).margin({ top: '35%' }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)Text('辅助文本').maxFontSize('16sp').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%')}.startAngle(225).endAngle(135).colors(Color.Red).width('80%').height('80%').indicator(null).strokeWidth(18).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}

gauge

示例7

示例使用当前数值、最大最小数值。

@Entry
@Component
struct Gauge7 {build() {Column() {Gauge({ value: 50, min: 1, max: 100 }) {Column() {Text('50').maxFontSize('60sp').minFontSize('30.0vp').fontWeight(FontWeight.Medium).fontColor("#ff182431").width('62%').textAlign(TextAlign.Center).margin({ top: '35%' }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)}.width('100%').height('100%')}.startAngle(225).endAngle(135).colors(Color.Red).width('80%').height('80%').indicator(null).strokeWidth(18).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}

gauge

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/525679.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【leetcode】429. N 叉树的层序遍历

【leetcode】429. N 叉树的层序遍历

题目描述 给定一个 N 叉树&#xff0c;返回其节点值的_层序遍历_。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。 示例 1&#xff1a; 输入&#xff1a;…
阅读更多...
信息抽取在旅游行业的应用：以景点信息抽取为例

信息抽取在旅游行业的应用：以景点信息抽取为例

开源项目推荐 今天先给大家推荐一个开源项目&#xff0c;多模态AI能力引擎平台: 免费的自然语言处理、情感分析、实体识别、图像识别与分类、OCR识别、语音识别接口&#xff0c;功能强大&#xff0c;欢迎体验。 https://gitee.com/stonedtx/free-nlp-api 场景描述 在旅游行业…
阅读更多...
数据结构——线性表顺序表示详解

数据结构——线性表顺序表示详解

目录 1.线性表的类型定义 2.基本操作 3.线性表的存储结构 4.补充 1.元素类型说明 2.数组定义​编辑 3.c语言的内存动态分配 4.c的动态存储分配 5.c中的参数传递 引用类型作参数 6.顺序表基本操作的实现 1.线性表的初始化 代码示例&#xff1a; 2.销毁线性表&…
阅读更多...
分享关于如何解决系统设计问题的逐步框架

分享关于如何解决系统设计问题的逐步框架

公司广泛采用系统设计面试&#xff0c;因为在这些面试中测试的沟通和解决问题的技能与软件工程师日常工作所需的技能相似。面试官的评估基于她如何分析一个模糊的问题以及如何逐步解决问题。测试的能力还包括她如何解释这个想法&#xff0c;与他人讨论&#xff0c;以及评估和优…
阅读更多...
Session登陆实践

Session登陆实践

Session登陆实践 Session登录是一种常见的Web应用程序身份验证和状态管理机制。当用户成功登录到应用程序时&#xff0c;服务器会为其创建一个会话&#xff08;session&#xff09;&#xff0c;并在会话中存储有关用户的信息。这样&#xff0c;用户在与应用程序交互的整个会话…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）

鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）

通过bindContentCover属性为组件绑定全屏模态页面&#xff0c;在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。 说明&#xff1a; 从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 不支持横竖屏切换。…
阅读更多...
【CSharp】线程间操作无效,从不是创建控件XXX的线程访问它的解决办法

【CSharp】线程间操作无效,从不是创建控件XXX的线程访问它的解决办法

【CSharp】线程间操作无效,从不是创建控件XXX的线程访问它的解决办法 1.背景2.问题3.解决办法 1.背景 我的项目是 Windows窗体应用&#xff08; .NET Framework)。 在 C# 中&#xff0c;窗体&#xff08;Windows Form&#xff09;的 UI 元素通常在创建它们的主线程上进行访问…
阅读更多...
【软考】设计模式之享元模式

【软考】设计模式之享元模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. 适用性6. java示例 1. 说明 1.享元设计模式&#xff08;Flyweight Design Pattern&#xff09;是一种常见的软件设计模式2.属于结构型设计模式&#xff0c;对象结构型模式3.目的&#xff1a;运用共享技术有效地支持大量细粒度的对象…
阅读更多...
力扣日记3.6-【回溯算法篇】51. N 皇后

力扣日记3.6-【回溯算法篇】51. N 皇后

力扣日记&#xff1a;【回溯算法篇】51. N 皇后 日期&#xff1a;2023.3.6 参考&#xff1a;代码随想录、力扣 51. N 皇后 题目描述 难度&#xff1a;困难 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将…
阅读更多...
智能工具管理系统-智能工具柜系统

智能工具管理系统-智能工具柜系统

智能工具可视化管理系统(智工具DW-S308)是依托互3D技术、云计算、大数据、RFID技术、数据库技术、AI、视频分析技术对RFID工具进行统一管理、分析的信息化、智能化、规范化的系统。 一、工具管理现状 东识RFID工具管理系统是一种便捷化的工具管理系统&#xff0c;它采用RFID技…
阅读更多...
一篇搞懂什么是LRU缓存｜一篇搞懂LRU缓存的实现｜LRUCache详解和实现

一篇搞懂什么是LRU缓存｜一篇搞懂LRU缓存的实现｜LRUCache详解和实现

LRUCache 文章目录 LRUCache前言项目代码仓库什么时候会用到缓存(Cache)缓存满了&#xff0c;怎么办&#xff1f;什么是LRUCacheLRUCache的实现LRUCache对应的OJ题实现LRUCache对应的STL风格实现 前言 这里分享我的一些博客专栏&#xff0c;都是干货满满的。 手撕数据结构专栏…
阅读更多...
【UE5】游戏框架GamePlay

【UE5】游戏框架GamePlay

项目资源文末百度网盘自取 游戏框架 游戏 由 游戏模式(GameMode) 和 游戏状态(GameState) 所组成 加入游戏的 人类玩家 与 玩家控制器(PlayerController) 相关联 玩家控制器允许玩家在游戏中拥有 HUD&#xff0c;这样他们就能在关卡中拥有物理代表 玩家控制器还向玩家提供 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023