
#跟着坚果学鸿蒙# ——信息展示-Gauge-设置最大最小值
·
前言
本系列文章旨在通过系统性地测试官网提供的各类功能示例,以实践验证其实际应用效果。我们将从开发者实际需求出发,通过完整运行每个示例代码,详细记录执行过程与结果输出,从而评估这些示例能否为开发者提供有效的帮助。
示例效果说明
该示例通过设置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%')
}
}
示例效果
核心内容
Gauge({ value: 50, min: 1, max: 100 })
更多推荐
所有评论(0)