前言

本系列文章旨在通过系统性地测试官网提供的各类功能示例，以实践验证其实际应用效果。我们将从开发者实际需求出发，通过完整运行每个示例代码，详细记录执行过程与结果输出，从而评估这些示例能否为开发者提供有效的帮助。

示例效果说明

该示例通过indicator接口，实现了设置量规图的指针的功能。

示例代码

@Entry
@Component
struct Index {
  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%')
  }
}

示例效果

核心内容

通过 animateTo({...}, () => {...}) 实现动画过渡。
点击后 value 从 0 动画过渡到 50，带动 Gauge 渲染变化。