【鸿蒙开发】第7课,Gauge环形图表组件、Progress进度条组件

81 阅读2分钟

1 Gauge组件详解

Gauge组件是鸿蒙系统中用于显示进度信息的重要组件,通常呈现为环形图表或线性图表。它广泛应用于各种需要展示进度或百分比的场景,如下载进度、电量显示、任务完成度等。通过Gauge组件,开发者可以直观地展示数据的变化情况,提升应用的交互性和用户体验。

1.1 Gauge组件的基本使用

在鸿蒙系统中,Gauge组件的使用相对简单。开发者可以通过ArkUI框架来创建和配置Gauge组件。以下是一个基本的Gauge组件使用示例:

动画.gif

@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属性用于设置当前的进度值,widthheight属性用于设置组件的宽度和高度,colors属性用于设置量规图的颜色。

1.2 Gauge组件的自定义样式

鸿蒙系统允许开发者对Gauge组件进行丰富的自定义样式设置,以满足不同应用的需求。以下是一些常见的自定义样式方法:

  1. 分段显示:通过设置colors属性,可以实现量规图的分段显示。例如,使用颜色数组[[Color.Red, 0.3], [Color.Green, 0.7]]表示红色占进度条的30%,绿色占70%。
  2. 调整环形宽度:通过设置strokeWidth属性,可以调整量规图的环形宽度,以适应不同的设计需求。
  3. 添加指针和阴影:通过设置indicatortrackShadow属性,可以为量规图添加指针和阴影效果,提升视觉效果。
  4. 动态更新进度:通过绑定数据变 量到value属性,可以实现进度的动态更新。例如,在下载过程中实时更新下载进度。

2 Progress组件详解

Progress组件是鸿蒙UI框架中的一个常用组件,主要用于显示操作或任务的进度。它支持多种样式,如线性、环形、刻度环形、椭圆形和胶囊形等,适用于文件上传/下载、任务完成度、系统状态反馈等多种场景。通过Progress组件,开发者可以轻松地提升应用的用户体验,让用户更直观地了解当前操作的进展情况。

2.1 Progress组件的基本用法

在鸿蒙开发中,创建和使用Progress组件非常简单。基本用法如下:

动画.gif

@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组件提供了多种类型,以满足不同场景下的需求。以下是常见的几种类型:

  1. Linear(线性进度条):这是Progress组件的默认样式,适用于大多数场景。
  2. Ring(环形无刻度样式):适用于需要环形进度条但不需要刻度的场景。
  3. ScaleRing(环形有刻度样式):适用于需要环形进度条并带有刻度的场景。
  4. Eclipse(椭圆形进度条):适用于需要椭圆形进度条的场景。
  5. Capsule(胶囊形进度条):适用于需要胶囊形进度条的场景。

开发者可以根据实际需求选择合适的进度条类型,并通过type属性进行设置。

2.3 Progress组件的样式设置

鸿蒙系统为Progress组件提供了丰富的样式设置选项,以满足不同应用场景下的需求。以下是一些常见的样式设置:

  1. 宽度设置:通过strokeWidth属性可以设置进度条的宽度。该属性适用于线性、环形和刻度环形进度条。
  2. 刻度设置:对于刻度环形进度条,可以通过scaleCountscaleWidth属性设置刻度的数量和宽度。
  3. 颜色设置:通过color()backgroundColor()方法可以设置进度条的前景色和背景色。

image.png 示例如下:

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组件的进度。以下是一个简单的示例:

动画.gif

@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组件在鸿蒙应用中有着广泛的应用场景。以下是一个简单的实际应用案例:文件下载进度条。

动画.gif

@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毫秒更新一次进度
    }
}

在上述示例中,我们创建了一个文件下载进度条。通过模拟下载过程,我们动态更新进度条的进度值,并在界面上显示下载进度百分比。