1# Gauge 2 3数据量规图表组件，用于将数据展示为环形图表。 4 5 6> **说明：** 7> 8> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13可以包含单个子组件。 14 15> **说明：** 16> 17> 建议使用文本组件构建当前数值文本和辅助文本。 18> 19> 若子组件宽高为百分比形式，则基准范围为以外圆环做为内切圆的矩形。 20 21 22## 接口 23 24Gauge(options:{value: number, min?: number, max?: number}) 25 26创建数据量规图表组件。 27 28**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 29 30**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 参数名 | 类型 | 必填 | 说明 | 37| -------- | -------- | -------- | -------- | 38| value | number | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。<br/>**说明：** <br/>value不在min和max范围内时使用min作为默认值。 | 39| min | number | 否 | 当前数据段最小值。<br/>默认值：0 | 40| max | number | 否 | 当前数据段最大值。<br/>默认值：100<br/>**说明：** <br/>max小于min时使用默认值0和100。<br/>max和min支持负数。 | 41 42## 属性 43 44除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 45 46### value 47 48value(value: number) 49 50设置量规图的数据值。 51 52**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 53 54**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数：** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ------ | ------ | ---- | ------------------------------------------------------------ | 62| value | number | 是 | 量规图的数据值，可用于动态修改量规图的数据值。<br/>默认值：0 | 63 64### startAngle 65 66startAngle(angle: number) 67 68设置起始角度位置。 69 70**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 71 72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76**参数：** 77 78| 参数名 | 类型 | 必填 | 说明 | 79| ------ | ------ | ---- | ------------------------------------------------------------ | 80| angle | number | 是 | 起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0 | 81 82### endAngle 83 84endAngle(angle: number) 85 86设置终止角度位置。起始角度位置和终止角度位置差过小时，会绘制出异常图像，请取合理的起始角度位置和终止角度位置。建议使用单色环改变Gauge的value参数实现数据值的调节，可通过定时器setTimeout进行数值的延迟加载。 87 88**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------ | ------ | ---- | ------------------------------------------------------------ | 98| angle | number | 是 | 终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360 | 99 100### colors 101 102colors(colors: ResourceColor | LinearGradient | Array<[ResourceColor | LinearGradient, number]>) 103 104设置量规图的颜色。 105 106从API version 11开始，该接口使用以下规则： 107 108参数类型为ResourceColor，则圆环类型为单色环。 109 110参数类型为LinearGradient，则圆环类型为渐变环。 111 112参数类型为数组，则圆环类型为分段渐变环，第一个参数为颜色值，若设置为非颜色类型，则置为"0xFFE84026"。第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0。 113 114分段渐变环最大显示段数为9段，若多于9段，则多于部分不显示。 115 116**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 117 118**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122**参数：** 123 124| 参数名 | 类型 | 必填 | 说明 | 125| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 126| colors | [ResourceColor<sup>11+</sup>](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \| Array<[[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \, number]> | 是 | 量规图的颜色，支持分段颜色设置。<br/>API version 9 默认值：Color.Black<br/>API version 11默认值：<br/>若不传颜色，或者数组为空，无法确定圆环类型及颜色，则圆环颜色为"0xFF64BB5C"、"0xFFF7CE00"、"0xFFE84026"的渐变环。<br/>若传入颜色，但颜色值有误，则该颜色为"0xFFE84026"。<br/>若对应颜色的比重为0，则该颜色在圆环中不显示。若所有颜色比重均为0，圆环不显示。 | 127 128### strokeWidth 129 130strokeWidth(length: Length) 131 132设置环形量规图的环形厚度。 133 134**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 135 136**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140**参数：** 141 142| 参数名 | 类型 | 必填 | 说明 | 143| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 144| length | [Length](ts-types.md#length) | 是 | 环形量规图的环形厚度。<br/>默认值：4<br/>单位：vp<br/>**说明：** <br/>设置小于0的值时，按默认值显示。<br/>不支持百分比。 | 145 146### description<sup>11+</sup> 147 148description(value: CustomBuilder) 149 150设置说明内容。 151 152**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156**参数：** 157 158| 参数名 | 类型 | 必填 | 说明 | 159| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 160| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 说明内容。<br/>**说明：** <br/>@Builder中的内容由开发者自定义，建议使用文本或者图片。<br/>若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%*25.4%的矩形（图片为28.6%*28.6%），距离圆环底部0vp，左右居中。<br/>设置null则不显示内容。<br/>不设置则依赖是否设置数据最大最小值。<br/>若设置最大最小值或者只设置其中一个，则显示最大最小值。<br/>若未设置最大最小值，则不显示内容。<br/>最大最小值显示在圆环底部，位置不可移动，若圆环开口角度设置不恰当，存在圆环遮挡文字的情况。 | 161 162### trackShadow<sup>11+</sup> 163 164trackShadow(value: GaugeShadowOptions) 165 166设置阴影样式。 167 168**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 169 170**系统能力：** SystemCapability.ArkUI.ArkUI.Full 171 172**参数：** 173 174| 参数名 | 类型 | 必填 | 说明 | 175| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 176| value | [GaugeShadowOptions](#gaugeshadowoptions11对象说明) | 是 | 阴影样式。<br/>**说明：** <br/>阴影颜色与圆环颜色一致。<br/>设置null为不开启投影。 | 177 178### indicator<sup>11+</sup> 179 180indicator(value: GaugeIndicatorOptions) 181 182设置指针样式。 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188**参数：** 189 190| 参数名 | 类型 | 必填 | 说明 | 191| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 192| value | [GaugeIndicatorOptions](#gaugeindicatoroptions11对象说明) | 是 | 指针样式。<br/>**说明：** <br/>设置null则不显示指针。 | 193 194### privacySensitive<sup>12+</sup> 195 196privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 197 198设置隐私敏感。 199 200**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 201 202**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206**参数：** 207 208| 参数名 | 类型 | 必填 | 说明 | 209| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 210| isPrivacySensitiveMode | [Optional\<boolean\>] | 是 | 设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。<br/>**说明：** <br/>设置null则不敏感。<br/>[需要卡片框架支持。](./ts-universal-attributes-obscured.md) | 211 212### contentModifier<sup>12+</sup> 213 214contentModifier(modifier: ContentModifier\<GaugeConfiguration>) 215 216定制Slider内容区的方法。 217 218**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222**参数：** 223 224| 参数名 | 类型 | 必填 | 说明 | 225| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 226| modifier | [ContentModifier\<GaugeConfiguration>](#gaugeconfiguration12对象说明) | 是 | 在Gauge组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 227 228## GaugeShadowOptions<sup>11+</sup>对象说明 229 230GaugeShadowOptions继承自[MultiShadowOptions](ts-types.md#multishadowoptions10)，具有MultiShadowOptions的全部属性。 231 232**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 233 234## GaugeIndicatorOptions<sup>11+</sup>对象说明 235 236**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 237 238**系统能力：** SystemCapability.ArkUI.ArkUI.Full 239 240| 名称 | 类型 | 必填 | 说明 | 241| ------------- | ------- | ---- | -------- | 242| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标资源路径。<br/>**说明：** <br/>不配置则使用默认的三角形样式指针。<br/>支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。 | 243| space | [Dimension](ts-types.md#dimension10) | 否 | 指针距离圆环外边的间距。(不支持百分比) <br/>默认值：8<br/>单位：vp <br/>**说明：** <br/> 对于默认的三角形样式指针，间距为黑色三角形到圆环外边的间距。<br/> 若设置值小于0，则使用默认值。<br/>若设置值大于圆环半径，则使用默认值。| 244 245## GaugeConfiguration<sup>12+</sup>对象说明 246 247开发者需要自定义class实现ContentModifier接口。 248 249**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253| 名称 | 类型 | 必填 | 说明 | 254| ------ | ------ | ----| ---------------- | 255| value | number | 是 | 当前数据值。 | 256| min | number | 是 | 当前数据段最小值。 | 257| max | number | 是 | 当前数据段最大值。 | 258 259 260## 示例 261### 示例1（设置多色量规图） 262 263该示例通过colors接口，实现了多色量规图效果。 264 265```ts 266@Entry 267@Component 268struct Gauge1 { 269 @Builder 270 descriptionBuilder() { 271 Text('说明文本') 272 .maxFontSize('30sp') 273 .minFontSize("10.0vp") 274 .fontColor("#fffa2a2d") 275 .fontWeight(FontWeight.Medium) 276 .width('100%') 277 .height("100%") 278 .textAlign(TextAlign.Center) 279 } 280 281 build() { 282 Column() { 283 Gauge({ value: 50, min: 1, max: 100 }) { 284 Column() { 285 Text('50') 286 .fontWeight(FontWeight.Medium) 287 .width('62%') 288 .fontColor("#ff182431") 289 .maxFontSize("60.0vp") 290 .minFontSize("30.0vp") 291 .textAlign(TextAlign.Center) 292 .margin({ top: '35%' }) 293 .textOverflow({ overflow: TextOverflow.Ellipsis }) 294 .maxLines(1) 295 Text('辅助文本') 296 .maxFontSize("16.0fp") 297 .minFontSize("10.0vp") 298 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 299 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 300 .fontWeight(FontWeight.Regular) 301 .width('67.4%') 302 .height('9.5%') 303 .textAlign(TextAlign.Center) 304 }.width('100%').height('100%') 305 } 306 .value(50) 307 .startAngle(210) 308 .endAngle(150) 309 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 310 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 311 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 312 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 313 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 314 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 315 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 316 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 317 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 318 .width('80%') 319 .height('80%') 320 .strokeWidth(18) 321 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 322 .description(this.descriptionBuilder) 323 .padding(18) 324 }.margin({ top: 40 }).width('100%').height('100%') 325 } 326} 327``` 328 329 330### 示例2（设置单色量规图） 331 332该示例通过colors接口，实现了单色量规图效果。 333 334```ts 335@Entry 336@Component 337struct Gauge2 { 338 @Builder 339 descriptionBuilderImage() { 340 Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72) 341 } 342 343 build() { 344 Column() { 345 Gauge({ value: 50, min: 1, max: 100 }) { 346 Column() { 347 Text('50') 348 .fontWeight(FontWeight.Medium) 349 .width('62%') 350 .fontColor("#ff182431") 351 .maxFontSize("60.0vp") 352 .minFontSize("30.0vp") 353 .textAlign(TextAlign.Center) 354 .margin({ top: '35%' }) 355 .textOverflow({ overflow: TextOverflow.Ellipsis }) 356 .maxLines(1) 357 }.width('100%').height('100%') 358 } 359 .startAngle(210) 360 .endAngle(150) 361 .colors('#cca5d61d') 362 .width('80%') 363 .height('80%') 364 .strokeWidth(18) 365 .description(this.descriptionBuilderImage) 366 .padding(18) 367 }.margin({ top: 40 }).width('100%').height('100%') 368 } 369} 370``` 371 372 373### 示例3（设置定制说明区） 374 375该示例通过description接口，实现了说明区的设置功能。 376 377```ts 378@Entry 379@Component 380struct Gauge3 { 381 @Builder 382 descriptionBuilder() { 383 Text('说明文本') 384 .maxFontSize('30sp') 385 .minFontSize("10.0vp") 386 .fontColor("#fffa2a2d") 387 .fontWeight(FontWeight.Medium) 388 .width('100%') 389 .height("100%") 390 .textAlign(TextAlign.Center) 391 } 392 393 build() { 394 Column() { 395 Column() { 396 Gauge({ value: 50, min: 1, max: 100 }) { 397 Column() { 398 Text('50') 399 .fontWeight(FontWeight.Medium) 400 .width('62%') 401 .fontColor("#ff182431") 402 .maxFontSize("60.0vp") 403 .minFontSize("30.0vp") 404 .textAlign(TextAlign.Center) 405 .margin({ top: '35%' }) 406 .textOverflow({ overflow: TextOverflow.Ellipsis }) 407 .maxLines(1) 408 }.width('100%').height('100%') 409 } 410 .startAngle(210) 411 .endAngle(150) 412 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 413 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 414 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 415 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 416 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 417 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 418 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 419 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 420 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 421 .width('80%') 422 .height('80%') 423 .strokeWidth(18) 424 .description(this.descriptionBuilder) 425 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 426 .padding(18) 427 }.margin({ top: 40 }).width('100%').height('100%') 428 } 429 } 430} 431``` 432 433 434### 示例4（设置辅助区） 435 436该示例通过设置子组件，实现了辅助区的设置功能。 437 438```ts 439@Entry 440@Component 441struct Gauge4 { 442 build() { 443 Column() { 444 Gauge({ value: 50, min: 1, max: 100 }) { 445 Column() { 446 Text('50') 447 .maxFontSize("72.0vp") 448 .minFontSize("10.0vp") 449 .fontColor("#ff182431") 450 .width('40%') 451 .textAlign(TextAlign.Center) 452 .margin({ top: '35%' }) 453 .textOverflow({ overflow: TextOverflow.Ellipsis }) 454 .maxLines(1) 455 Text('辅助文本') 456 .maxFontSize("30.0vp") 457 .minFontSize("18.0vp") 458 .fontWeight(FontWeight.Medium) 459 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 460 .width('62%') 461 .height('15.9%') 462 .textAlign(TextAlign.Center) 463 }.width('100%').height('100%') 464 } 465 .startAngle(210) 466 .endAngle(150) 467 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 468 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 469 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 470 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 471 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 472 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 473 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 474 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 475 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 476 .width('80%') 477 .height('80%') 478 .strokeWidth(18) 479 .description(null) 480 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 481 .padding(18) 482 }.margin({ top: 40 }).width('100%').height('100%') 483 } 484} 485``` 486 487 488### 示例5（设置最大最小值） 489 490该示例通过设置min，max属性，实现了量规图的最大最小值设置的功能。 491 492```ts 493@Entry 494@Component 495struct Gauge5 { 496 build() { 497 Column() { 498 Gauge({ value: 50, min: 1, max: 100 }) { 499 Column() { 500 Text('50') 501 .maxFontSize("80sp") 502 .minFontSize("60.0vp") 503 .fontWeight(FontWeight.Medium) 504 .fontColor("#ff182431") 505 .width('40%') 506 .height('30%') 507 .textAlign(TextAlign.Center) 508 .margin({ top: '22.2%' }) 509 .textOverflow({ overflow: TextOverflow.Ellipsis }) 510 .maxLines(1) 511 }.width('100%').height('100%') 512 } 513 .startAngle(225) 514 .endAngle(135) 515 .colors(new LinearGradient([{ color: "#e84026", offset: 0 }, 516 { color: "#f7ce00", offset: 0.6 }, 517 { color: "#64bb5c", offset: 1 }])) 518 .width('80%') 519 .height('80%') 520 .strokeWidth(18) 521 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 522 .padding(18) 523 }.margin({ top: 40 }).width('100%').height('100%') 524 } 525} 526``` 527 528 529### 示例6（设置指针） 530 531该示例通过indicator接口，实现了设置量规图的指针的功能。 532 533```ts 534@Entry 535@Component 536struct Gauge6 { 537 build() { 538 Column() { 539 Gauge({ value: 50, min: 1, max: 100 }) { 540 Column() { 541 Text('50') 542 .maxFontSize('60sp') 543 .minFontSize('30.0vp') 544 .fontWeight(FontWeight.Medium) 545 .fontColor("#ff182431") 546 .width('62%') 547 .textAlign(TextAlign.Center) 548 .margin({ top: '35%' }) 549 .textOverflow({ overflow: TextOverflow.Ellipsis }) 550 .maxLines(1) 551 Text('辅助文本') 552 .maxFontSize('16sp') 553 .minFontSize("10.0vp") 554 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 555 .fontWeight(FontWeight.Regular) 556 .width('67.4%') 557 .height('9.5%') 558 .textAlign(TextAlign.Center) 559 }.width('100%').height('100%') 560 } 561 .startAngle(225) 562 .endAngle(135) 563 .colors(Color.Red) 564 .width('80%') 565 .height('80%') 566 .indicator(null) 567 .strokeWidth(18) 568 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 569 .padding(18) 570 }.margin({ top: 40 }).width('100%').height('100%') 571 } 572} 573``` 574 575 576### 示例7（设置起止角度） 577 578该示例通过startAngle、endAngle接口，实现了量规图起止角度设置的功能。 579 580```ts 581@Entry 582@Component 583struct Gauge7 { 584 build() { 585 Column() { 586 Gauge({ value: 50, min: 1, max: 100 }) { 587 Column() { 588 Text('50') 589 .maxFontSize('60sp') 590 .minFontSize('30.0vp') 591 .fontWeight(FontWeight.Medium) 592 .fontColor("#ff182431") 593 .width('62%') 594 .textAlign(TextAlign.Center) 595 .margin({ top: '35%' }) 596 .textOverflow({ overflow: TextOverflow.Ellipsis }) 597 .maxLines(1) 598 }.width('100%').height('100%') 599 } 600 .startAngle(225) 601 .endAngle(135) 602 .colors(Color.Red) 603 .width('80%') 604 .height('80%') 605 .indicator(null) 606 .strokeWidth(18) 607 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 608 .padding(18) 609 }.margin({ top: 40 }).width('100%').height('100%') 610 } 611} 612``` 613 614 615 616 617### 示例8（设置定制内容区） 618 619该示例通过contentModifier接口，实现了定制量规图内容区的功能。 620 621```ts 622// xxx.ets 623//该示例实现了Gauge组件使用Builder定制内容区，使用了环形图表组件，按钮和文本框。点击增加按钮，环形图表指针位置会向右偏移，反之点减少按钮环形图表指针位置会向左偏移。 624@Builder 625function buildGauge(config: GaugeConfiguration) { 626 Column({ space: 30 }) { 627 Row() { 628 Text('【ContentModifier】 value：' + JSON.stringify((config.contentModifier as MyGaugeStyle).value) + 629 ' min：' + JSON.stringify((config.contentModifier as MyGaugeStyle).min) + 630 ' max：' + JSON.stringify((config.contentModifier as MyGaugeStyle).max)) 631 .fontSize(12) 632 } 633 634 Text('【Config】value：' + config.value + ' min：' + config.min + ' max：' + config.max).fontSize(12) 635 Gauge({ 636 value: config.value, 637 min: config.min, 638 max: config.max 639 }).width("50%") 640 } 641 .width("100%") 642 .padding(20) 643 .margin({ top: 5 }) 644 .alignItems(HorizontalAlign.Center) 645} 646 647class MyGaugeStyle implements ContentModifier<GaugeConfiguration> { 648 value: number = 0 649 min: number = 0 650 max: number = 0 651 652 constructor(value: number, min: number, max: number) { 653 this.value = value 654 this.min = min 655 this.max = max 656 } 657 658 applyContent(): WrappedBuilder<[GaugeConfiguration]> { 659 return wrapBuilder(buildGauge) 660 } 661} 662 663@Entry 664@Component 665struct refreshExample { 666 @State gaugeValue: number = 20 667 @State gaugeMin: number = 0 668 @State gaugeMax: number = 100 669 670 build() { 671 Column({ space: 20 }) { 672 Gauge({ 673 value: this.gaugeValue, 674 min: this.gaugeMin, 675 max: this.gaugeMax 676 }) 677 .contentModifier(new MyGaugeStyle(30, 10, 100)) 678 679 Column({ space: 20 }) { 680 Row({ space: 20 }) { 681 Button('增加').onClick(() => { 682 if (this.gaugeValue < this.gaugeMax) { 683 this.gaugeValue += 1 684 } 685 }) 686 Button('减少').onClick(() => { 687 if (this.gaugeValue > this.gaugeMin) { 688 this.gaugeValue -= 1 689 } 690 }) 691 } 692 }.width('100%') 693 }.width('100%').margin({ top: 5 }) 694 } 695} 696``` 697 698 699 700### 示例9（设置隐私隐藏） 701 702该示例通过privacySensitive接口，实现了隐私隐藏效果，效果展示需要卡片框架支持 703 704```ts 705@Entry 706@Component 707struct GaugeExample { 708 build() { 709 Scroll() { 710 Column({ space: 15 }) { 711 Row() { 712 Gauge({ value: 50, min: 1, max: 100 }) { 713 Column() { 714 Text('60') 715 .maxFontSize("180sp") 716 .minFontSize("160.0vp") 717 .fontWeight(FontWeight.Medium) 718 .fontColor("#ff182431") 719 .width('40%') 720 .height('30%') 721 .textAlign(TextAlign.Center) 722 .margin({ top: '22.2%' }) 723 .textOverflow({ overflow: TextOverflow.Ellipsis }) 724 .maxLines(1) 725 }.width('100%').height('100%') 726 } 727 .startAngle(225) 728 .endAngle(135) 729 .colors(Color.Red) 730 .width('80%') 731 .height('80%') 732 .strokeWidth(18) 733 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 734 .padding(18) 735 .privacySensitive(true) 736 } 737 } 738 } 739 } 740} 741``` 742
