写一个鸿蒙开发里很有意思的一个小组件：Gauge（）

OKOK 激动的心颤抖的手 刚入鸿蒙3个月，佬勿喷，有蛮多有意思的组件，虽然鸿蒙的优化是一*（不是我说的！）but i belive it T0T T0T T0T T0T

废话不多说，我先说一下这个组件:

Gauge 组件是一种直观且实用的数据可视化工具。它通常以圆形或半圆形的表盘形式呈现，通过指针或刻度的变化来清晰展示数值的范围和当前状态。Gauge 组件能够将复杂的数据转化为易于理解的图形信息，使用户一眼就能把握关键指标的情况。例如在监测系统中，它可以用于显示设备的运行速度、温度、压力等关键参数。其设计简洁美观，可根据不同需求定制颜色、刻度、标签等元素，适配多种应用场景，为数据的展示和分析提供了高效便捷的方式。

好吧，以上的也全是废话，说句简单的就是一个可以当电量或者什么倒计时温度的一个可视化工具。

什么？你不想听我废话 那你也得听！上班已经上魔怔了，还不让人在网络上碎碎念了 略略~~

属性：

• value：设置量规图的数据值，可用于动态修改量规图的数据值，默认值为0。

• startAngle：设置起始角度位置，时钟0点为0度，顺时针方向为正角度，默认值为0。

• endAngle：设置终止角度位置，时钟0点为0度，顺时针方向为正角度，默认值为360。

• colors：设置量规图的颜色，支持分段颜色设置，默认值为 Color.Black。

• strokeWidth：设置环形量规图的环形厚度，默认值为4，单位为 vp。需注意，设置小于0的值时，按默认值显示，不支持百分比。

• description：设置说明内容 ：@Builder中的内容由开发者自定义，建议使用文本或者图片。
  若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%*25.4%的矩形（图片为28.6%*28.6%），距离圆环底部0vp，左右居中。
  设置null则不显示内容。
  不设置则依赖是否设置数据最大最小值。
  若设置最大最小值或者只设置其中一个，则显示最大最小值。
  若未设置最大最小值，则不显示内容。
  最大最小值显示在圆环底部，位置不可移动，若圆环开口角度设置不恰当，存在圆环遮挡文字的情况。

• trackShadow：设置阴影样式 ：阴影颜色与圆环颜色一致。 设置null为不开启投影。

• indicator：设置指针样式。 设置null则不显示指针。

介绍完参数和属性了，可能大家就会说了，啊你这些都是copy的，你还会干什么。。。好吧，我在给写个小案例给你们看一下好咯

@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('70%')
            .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%')
      }
      .value(70)
      .startAngle(210)
      .endAngle(150)
      .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 6],
        [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 6],
        [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 3]])
      .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%')
  }
}

okk 虽然今天什么也没干，但还是辛苦我自己了！！