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"。 | 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```ts 264@Entry 265@Component 266struct Gauge1 { 267 @Builder descriptionBuilder() { 268 Text('说明文本') 269 .maxFontSize('30sp') 270 .minFontSize("10.0vp") 271 .fontColor("#fffa2a2d") 272 .fontWeight(FontWeight.Medium) 273 .width('100%') 274 .height("100%") 275 .textAlign(TextAlign.Center) 276 } 277 278 build() { 279 Column() { 280 Gauge({ value: 50, min: 1, max: 100 }) { 281 Column() { 282 Text('50') 283 .fontWeight(FontWeight.Medium) 284 .width('62%') 285 .fontColor("#ff182431") 286 .maxFontSize("60.0vp") 287 .minFontSize("30.0vp") 288 .textAlign(TextAlign.Center) 289 .margin({ top: '35%' }) 290 .textOverflow({ overflow: TextOverflow.Ellipsis }) 291 .maxLines(1) 292 Text('辅助文本') 293 .maxFontSize("16.0fp") 294 .minFontSize("10.0vp") 295 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 296 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 297 .fontWeight(FontWeight.Regular) 298 .width('67.4%') 299 .height('9.5%') 300 .textAlign(TextAlign.Center) 301 }.width('100%').height('100%') 302 } 303 .value(50) 304 .startAngle(210) 305 .endAngle(150) 306 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 307 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 308 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 309 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 310 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 311 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 312 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 313 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 314 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 315 .width('80%') 316 .height('80%') 317 .strokeWidth(18) 318 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 319 .description(this.descriptionBuilder) 320 .padding(18) 321 }.margin({ top: 40 }).width('100%').height('100%') 322 } 323} 324``` 325 326 327### 示例2 328示例使用当前数值、图标。 329```ts 330@Entry 331@Component 332struct Gauge2 { 333 @Builder descriptionBuilderImage() { 334 Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72) 335 } 336 337 build() { 338 Column() { 339 Gauge({ value: 50, min: 1, max: 100 }) { 340 Column() { 341 Text('50') 342 .fontWeight(FontWeight.Medium) 343 .width('62%') 344 .fontColor("#ff182431") 345 .maxFontSize("60.0vp") 346 .minFontSize("30.0vp") 347 .textAlign(TextAlign.Center) 348 .margin({ top: '35%' }) 349 .textOverflow({ overflow: TextOverflow.Ellipsis }) 350 .maxLines(1) 351 }.width('100%').height('100%') 352 } 353 .startAngle(210) 354 .endAngle(150) 355 .colors('#cca5d61d') 356 .width('80%') 357 .height('80%') 358 .strokeWidth(18) 359 .description(this.descriptionBuilderImage) 360 .padding(18) 361 }.margin({ top: 40 }).width('100%').height('100%') 362 } 363} 364``` 365 366 367### 示例3 368示例使用当前数值、说明文本。 369```ts 370@Entry 371@Component 372struct Gauge3 { 373 @Builder descriptionBuilder() { 374 Text('说明文本') 375 .maxFontSize('30sp') 376 .minFontSize("10.0vp") 377 .fontColor("#fffa2a2d") 378 .fontWeight(FontWeight.Medium) 379 .width('100%') 380 .height("100%") 381 .textAlign(TextAlign.Center) 382 } 383 384 build() { 385 Column() { 386 Column() { 387 Gauge({ value: 50, min: 1, max: 100 }) { 388 Column() { 389 Text('50') 390 .fontWeight(FontWeight.Medium) 391 .width('62%') 392 .fontColor("#ff182431") 393 .maxFontSize("60.0vp") 394 .minFontSize("30.0vp") 395 .textAlign(TextAlign.Center) 396 .margin({ top: '35%' }) 397 .textOverflow({ overflow: TextOverflow.Ellipsis }) 398 .maxLines(1) 399 }.width('100%').height('100%') 400 } 401 .startAngle(210) 402 .endAngle(150) 403 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 404 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 405 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 406 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 407 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 408 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 409 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 410 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 411 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 412 .width('80%') 413 .height('80%') 414 .strokeWidth(18) 415 .description(this.descriptionBuilder) 416 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 417 .padding(18) 418 }.margin({ top: 40 }).width('100%').height('100%') 419 } 420 } 421} 422``` 423 424 425### 示例4 426示例使用当前数值、辅助文本。 427```ts 428@Entry 429@Component 430struct Gauge4 { 431 build() { 432 Column() { 433 Gauge({ value: 50, min: 1, max: 100 }) { 434 Column() { 435 Text('50') 436 .maxFontSize("72.0vp") 437 .minFontSize("10.0vp") 438 .fontColor("#ff182431") 439 .width('40%') 440 .textAlign(TextAlign.Center) 441 .margin({ top: '35%' }) 442 .textOverflow({ overflow: TextOverflow.Ellipsis }) 443 .maxLines(1) 444 Text('辅助文本') 445 .maxFontSize("30.0vp") 446 .minFontSize("18.0vp") 447 .fontWeight(FontWeight.Medium) 448 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 449 .width('62%') 450 .height('15.9%') 451 .textAlign(TextAlign.Center) 452 }.width('100%').height('100%') 453 } 454 .startAngle(210) 455 .endAngle(150) 456 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 457 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 458 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 459 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 460 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 461 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 462 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 463 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 464 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 465 .width('80%') 466 .height('80%') 467 .strokeWidth(18) 468 .description(null) 469 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 470 .padding(18) 471 }.margin({ top: 40 }).width('100%').height('100%') 472 } 473} 474``` 475 476 477### 示例5 478示例使用当前数值、最大最小数值。 479```ts 480@Entry 481@Component 482struct Gauge5 { 483 build() { 484 Column() { 485 Gauge({ value: 50, min: 1, max: 100 }) { 486 Column() { 487 Text('50') 488 .maxFontSize("80sp") 489 .minFontSize("60.0vp") 490 .fontWeight(FontWeight.Medium) 491 .fontColor("#ff182431") 492 .width('40%') 493 .height('30%') 494 .textAlign(TextAlign.Center) 495 .margin({ top: '22.2%' }) 496 .textOverflow({ overflow: TextOverflow.Ellipsis }) 497 .maxLines(1) 498 }.width('100%').height('100%') 499 } 500 .startAngle(225) 501 .endAngle(135) 502 .colors(new LinearGradient([{ color: "#e84026", offset: 0 }, 503 { color: "#f7ce00", offset: 0.6 }, 504 { color: "#64bb5c", offset: 1 }])) 505 .width('80%') 506 .height('80%') 507 .strokeWidth(18) 508 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 509 .padding(18) 510 }.margin({ top: 40 }).width('100%').height('100%') 511 } 512} 513``` 514 515 516### 示例6 517示例使用当前数值、最大最小数值、辅助文本。 518```ts 519@Entry 520@Component 521struct Gauge6 { 522 build() { 523 Column() { 524 Gauge({ value: 50, min: 1, max: 100 }) { 525 Column() { 526 Text('50') 527 .maxFontSize('60sp') 528 .minFontSize('30.0vp') 529 .fontWeight(FontWeight.Medium) 530 .fontColor("#ff182431") 531 .width('62%') 532 .textAlign(TextAlign.Center) 533 .margin({ top: '35%' }) 534 .textOverflow({ overflow: TextOverflow.Ellipsis }) 535 .maxLines(1) 536 Text('辅助文本') 537 .maxFontSize('16sp') 538 .minFontSize("10.0vp") 539 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 540 .fontWeight(FontWeight.Regular) 541 .width('67.4%') 542 .height('9.5%') 543 .textAlign(TextAlign.Center) 544 }.width('100%').height('100%') 545 } 546 .startAngle(225) 547 .endAngle(135) 548 .colors(Color.Red) 549 .width('80%') 550 .height('80%') 551 .indicator(null) 552 .strokeWidth(18) 553 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 554 .padding(18) 555 }.margin({ top: 40 }).width('100%').height('100%') 556 } 557} 558``` 559 560 561### 示例7 562示例使用当前数值、最大最小数值。 563```ts 564@Entry 565@Component 566struct Gauge7 { 567 build() { 568 Column() { 569 Gauge({ value: 50, min: 1, max: 100 }) { 570 Column() { 571 Text('50') 572 .maxFontSize('60sp') 573 .minFontSize('30.0vp') 574 .fontWeight(FontWeight.Medium) 575 .fontColor("#ff182431") 576 .width('62%') 577 .textAlign(TextAlign.Center) 578 .margin({ top: '35%' }) 579 .textOverflow({ overflow: TextOverflow.Ellipsis }) 580 .maxLines(1) 581 }.width('100%').height('100%') 582 } 583 .startAngle(225) 584 .endAngle(135) 585 .colors(Color.Red) 586 .width('80%') 587 .height('80%') 588 .indicator(null) 589 .strokeWidth(18) 590 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 591 .padding(18) 592 }.margin({ top: 40 }).width('100%').height('100%') 593 } 594} 595``` 596 597 598 599 600### 示例8 601 602```ts 603// xxx.ets 604//该示例实现了Gauge组件使用Builder定制内容区，使用了环形图表组件，按钮和文本框。点击增加按钮，环形图表指针位置会向右偏移，反之点减少按钮环形图表指针位置会向左偏移。 605@Builder 606function buildGauge(config: GaugeConfiguration) { 607 Column({ space: 30 }) { 608 Row() { 609 Text('【ContentModifier】 value：' + JSON.stringify((config.contentModifier as MyGaugeStyle).value) + 610 ' min：' + JSON.stringify((config.contentModifier as MyGaugeStyle).min) + 611 ' max：' + JSON.stringify((config.contentModifier as MyGaugeStyle).max)) 612 .fontSize(12) 613 } 614 615 Text('【Config】value：' + config.value + ' min：' + config.min + ' max：' + config.max).fontSize(12) 616 Gauge({ 617 value: config.value, 618 min: config.min, 619 max: config.max 620 }).width("50%") 621 } 622 .width("100%") 623 .padding(20) 624 .margin({ top: 5 }) 625 .alignItems(HorizontalAlign.Center) 626} 627 628class MyGaugeStyle implements ContentModifier<GaugeConfiguration> { 629 value: number = 0 630 min: number = 0 631 max: number = 0 632 633 constructor(value: number, min: number, max: number) { 634 this.value = value 635 this.min = min 636 this.max = max 637 } 638 639 applyContent(): WrappedBuilder<[GaugeConfiguration]> { 640 return wrapBuilder(buildGauge) 641 } 642} 643 644@Entry 645@Component 646struct refreshExample { 647 @State gaugeValue: number = 20 648 @State gaugeMin: number = 0 649 @State gaugeMax: number = 100 650 651 build() { 652 Column({ space: 20 }) { 653 Gauge({ 654 value: this.gaugeValue, 655 min: this.gaugeMin, 656 max: this.gaugeMax 657 }) 658 .contentModifier(new MyGaugeStyle(30, 10, 100)) 659 660 Column({ space: 20 }) { 661 Row({ space: 20 }) { 662 Button('增加').onClick(() => { 663 if (this.gaugeValue < this.gaugeMax) { 664 this.gaugeValue += 1 665 } 666 }) 667 Button('减少').onClick(() => { 668 if (this.gaugeValue > this.gaugeMin) { 669 this.gaugeValue -= 1 670 } 671 }) 672 } 673 }.width('100%') 674 }.width('100%').margin({ top: 5 }) 675 } 676} 677``` 678 679 680 681### 示例9 682 683该示例展示了如何配置隐私隐藏，效果展示需要卡片框架支持 684 685```ts 686@Entry 687@Component 688struct GaugeExample { 689 build() { 690 Scroll() { 691 Column({ space: 15 }) { 692 Row() { 693 Gauge({ value: 50, min: 1, max: 100 }) { 694 Column() { 695 Text('60') 696 .maxFontSize("180sp") 697 .minFontSize("160.0vp") 698 .fontWeight(FontWeight.Medium) 699 .fontColor("#ff182431") 700 .width('40%') 701 .height('30%') 702 .textAlign(TextAlign.Center) 703 .margin({ top: '22.2%' }) 704 .textOverflow({ overflow: TextOverflow.Ellipsis }) 705 .maxLines(1) 706 }.width('100%').height('100%') 707 } 708 .startAngle(225) 709 .endAngle(135) 710 .colors(Color.Red) 711 .width('80%') 712 .height('80%') 713 .strokeWidth(18) 714 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 715 .padding(18) 716 .privacySensitive(true) 717 } 718 } 719 } 720 } 721} 722``` 723
