1 Gauge组件详解
Gauge组件是鸿蒙系统中用于显示进度信息的重要组件，通常呈现为环形图表或线性图表。它广泛应用于各种需要展示进度或百分比的场景，如下载进度、电量显示、任务完成度等。通过Gauge组件，开发者可以直观地展示数据的变化情况，提升应用的交互性和用户体验。
1.1 Gauge组件的基本使用
在鸿蒙系统中，Gauge组件的使用相对简单。开发者可以通过ArkUI框架来创建和配置Gauge组件。以下是一个基本的Gauge组件使用示例：
@Entry
@Component
struct Index {
// 定义一个状态变量，用于存储当前进度值
@State progress: number = 25; // 当前进度值
// 定义一个状态变量，用于存储指针的偏移量
@State indicatorSpace: number = 25; // 当前指针偏移量
// 定义一个状态变量，用于控制是否显示指针
@State showPointer: boolean = true; // 是否显示指针
// 定义一个状态变量，用于控制是否显示阴影
@State showShadow: boolean = true; // 是否显示阴影
@State showColor: boolean = true; // 是否显示色彩
// 定义一个状态变量，用于存储底部说明文字
@State descriptionText: string = "任务进度"; // 底部说明文字
build() {
// 创建一个垂直排列的列布局，设置组件间的间距为16
Column({ space: 16 }) {
// 显示标题文本
Text("复杂Gauge组件示例")
.fontSize(24)// 设置字体大小为24
.fontWeight(FontWeight.Bold)// 设置字体为粗体
.margin({ bottom: 16 }) // 设置底部外边距为16
// Gauge组件
Gauge({
value: this.progress, // 绑定当前进度值
min: 0, // 设置最小进度值为0
max: 100 // 设置最大进度值为100
})
.startAngle(-90)// 设置起始角度为-90度，从顶部开始
.endAngle(270)// 设置结束角度为270度，顺时针旋转360度
.colors(this.showColor ? [
[Color.Red, 0.3], // 红色占30%
[Color.Yellow, 0.4], // 黄色占接下来的40%
[Color.Green, 0.3]// 绿色占最后的30%
] : Color.Gray)
.strokeWidth(30)// 设置环形宽度为30
.indicator({
icon: this.showPointer ? $r('sys.media.ohos_ic_public_sound') : null, // 根据showPointer状态显示或隐藏指针图标
space: this.indicatorSpace // 设置指针偏移量
})
.trackShadow({
radius: this.showShadow ? 50 : 0, // 根据showShadow状态设置阴影模糊半径
offsetX: 0, // 阴影水平偏移量
offsetY: 8 // 阴影垂直偏移量
})
.description((() => this.descriptionText))// 设置底部说明文字
.width(300)// 设置组件宽度为300
.height(300)// 设置组件高度为300
.margin({ bottom: 16 }) // 设置底部外边距为16
// 显示当前进度值的文本
Text(this.progress.toString())
// 减少进度按钮
Button("减少进度")
.onClick(() => {
if (this.progress > 0) {
this.progress -= 10; // 如果当前进度大于0，减少10
} else {
this.progress = 100; // 否则重置为100
}
})
// 增加进度按钮
Button("增加进度")
.onClick(() => {
if (this.progress < 100) {
this.progress += 10; // 如果当前进度小于100，增加10
} else {
this.progress = 0; // 否则重置为0
}
})
// 增加指针偏移按钮
Button("增加指针偏移")
.onClick(() => {
if (this.indicatorSpace < 100) {
this.indicatorSpace += 10; // 如果指针偏移小于100，增加10
} else {
this.indicatorSpace = 0; // 否则重置为0
}
})
// 切换指针显示状态按钮
Button("切换指针")
.onClick(() => {
this.showPointer = !this.showPointer; // 切换指针显示状态
})
// 切换阴影显示状态按钮
Button("切换阴影")
.onClick(() => {
this.showShadow = !this.showShadow; // 切换阴影显示状态
})
Button("切换颜色")
.onClick(() => {
this.showColor = !this.showColor;
})
}
.width('100%') // 设置列布局宽度为100%
.alignItems(HorizontalAlign.Center) // 设置子组件水平居中对齐
}
}
在上述示例中，Gauge组件的value属性用于设置当前的进度值，width和height属性用于设置组件的宽度和高度，colors属性用于设置量规图的颜色。
1.2 Gauge组件的自定义样式
鸿蒙系统允许开发者对Gauge组件进行丰富的自定义样式设置，以满足不同应用的需求。以下是一些常见的自定义样式方法：
- 分段显示：通过设置
colors属性，可以实现量规图的分段显示。例如，使用颜色数组[[Color.Red, 0.3], [Color.Green, 0.7]]表示红色占进度条的30%，绿色占70%。 - 调整环形宽度：通过设置
strokeWidth属性，可以调整量规图的环形宽度，以适应不同的设计需求。 - 添加指针和阴影：通过设置
indicator和trackShadow属性，可以为量规图添加指针和阴影效果，提升视觉效果。 - 动态更新进度：通过绑定数据变 量到
value属性，可以实现进度的动态更新。例如，在下载过程中实时更新下载进度。
2 Progress组件详解
Progress组件是鸿蒙UI框架中的一个常用组件，主要用于显示操作或任务的进度。它支持多种样式，如线性、环形、刻度环形、椭圆形和胶囊形等，适用于文件上传/下载、任务完成度、系统状态反馈等多种场景。通过Progress组件，开发者可以轻松地提升应用的用户体验，让用户更直观地了解当前操作的进展情况。
2.1 Progress组件的基本用法
在鸿蒙开发中，创建和使用Progress组件非常简单。基本用法如下：
@Entry
@Component
struct Index {
@State value: number = 50; // 设置进度条的当前进度值
build() {
Column() {
Progress({
value: this.value, // 设置当前进度
total: 100, // 设置进度总量
type: ProgressType.Linear // 设置进度条类型，默认为线性样式
})
.size({ width: 120, height: 50 }); // 设置进度条的大小
Blank(50)
Progress({
value: 0, // 设置当前进度
total: 100, // 设置进度总量
type: ProgressType.Ring // 设置进度条类型，默认为环样式
}).color(Color.Green) // 设置进度颜色
.style({ status: ProgressStatus.LOADING })// 无限循环
.size({ width: 120, height: 50 }); // 设置进度条的大小
}
}
}
在上述示例中，我们创建了一个线性进度条，并设置了其当前进度值为50，进度总量为100。通过.size()方法，我们可以调整进度条的大小。
2.2 Progress组件的类型
鸿蒙系统为Progress组件提供了多种类型，以满足不同场景下的需求。以下是常见的几种类型：
- Linear（线性进度条）：这是Progress组件的默认样式，适用于大多数场景。
- Ring（环形无刻度样式）：适用于需要环形进度条但不需要刻度的场景。
- ScaleRing（环形有刻度样式）：适用于需要环形进度条并带有刻度的场景。
- Eclipse（椭圆形进度条）：适用于需要椭圆形进度条的场景。
- Capsule（胶囊形进度条）：适用于需要胶囊形进度条的场景。
开发者可以根据实际需求选择合适的进度条类型，并通过type属性进行设置。
2.3 Progress组件的样式设置
鸿蒙系统为Progress组件提供了丰富的样式设置选项，以满足不同应用场景下的需求。以下是一些常见的样式设置：
- 宽度设置：通过
strokeWidth属性可以设置进度条的宽度。该属性适用于线性、环形和刻度环形进度条。 - 刻度设置：对于刻度环形进度条，可以通过
scaleCount和scaleWidth属性设置刻度的数量和宽度。 - 颜色设置：通过
color()和backgroundColor()方法可以设置进度条的前景色和背景色。
示例如下：
Progress({
value: 50,
total: 100,
type: ProgressType.ScaleRing
})
.size({ width: 120, height: 120 })
.style({
strokeWidth: 10,
scaleCount: 60,
scaleWidth: 2
})
.color(Color.Blue) // 设置前景色为蓝色
.backgroundColor(Color.White); // 设置背景色为白色
2.4 Progress组件的动态更新
在实际应用中，任务的进度通常是动态变化的。鸿蒙系统允许开发者通过状态管理来动态更新Progress组件的进度。以下是一个简单的示例：
@Entry
@Component
struct Index {
@State value: number = 0; // 初始化进度值为0
build() {
Column() {
Progress({
value: this.value,
total: 100,
type: ProgressType.Linear
})
.size({ width: 200, height: 30 });
Button('增加进度')
.onClick(() => {
this.value += 10; // 每次点击按钮增加10进度值
if (this.value > 100) {
this.value = 100; // 确保进度值不超过100
}
});
}
}
}
在上述示例中，我们通过一个按钮来动态更新进度条的进度值。每次点击按钮时，进度值增加10，直到达到100%。
2.5 Progress组件在实际应用中的案例
Progress组件在鸿蒙应用中有着广泛的应用场景。以下是一个简单的实际应用案例：文件下载进度条。
@Entry
@Component
struct FileDownload {
@State progress: number = 0; // 初始化下载进度为0
build() {
Column() {
Progress({
value: this.progress,
total: 100,
type: ProgressType.Ring
})
.size({ width: 100, height: 100 });
Text(`下载进度: ${this.progress}%`)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin({ top: 10 });
Button('开始下载')
.onClick(() => {
this.startDownload();
});
}
}
startDownload() {
let interval = setInterval(() => {
this.progress += 5; // 模拟下载进度增加
if (this.progress >= 100) {
clearInterval(interval); // 下载完成，清除定时器
}
}, 500); // 每500毫秒更新一次进度
}
}
在上述示例中，我们创建了一个文件下载进度条。通过模拟下载过程，我们动态更新进度条的进度值，并在界面上显示下载进度百分比。
