前言

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

示例效果说明

该示例通过设置min,max属性,实现了量规图的最大最小值设置的功能。

示例代码

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

示例效果

img

核心内容

Gauge({ value: 50, min: 1, max: 100 })

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐