如何实现可调高度的下载按钮

问题现象

ProgressButton默认不支持高度调整，如何实现可调高度的下载按钮？

背景知识

Progress：进度条组件，用于显示内容加载或操作处理等进度。

解决方案

• 方案逻辑：Progress组件可以配置高度，使用Progress的属性可实现与ProgressButton相同的下载效果。
  1. 通过Progress组件的style属性的content参数，实现在Progress组件上显示按钮文字和进度信息。
     收起

     自动换行

     深色代码主题

     复制

     Progress({ value: this.progressIndex, total: 100, type: ProgressType.Capsule })
       .width(300)
       .height(100)  // 设置Progress组件的高度
       .color(Color.Blue)
       .margin({top:300})
       .style({
         borderWidth: 1,
         content: this.textState, // 设置按钮文字
         font: { size: 13, style: FontStyle.Normal },
         enableScanEffect: false,
         showDefaultPercentage: false
       })

  2. 给Progress添加点击事件，控制Progress上显示内容的变化。初始时，显示为“下载”；点击后动态显示下载进度，再次点击后显示“继续”，并且暂停下载进度；进度100%后，显示为“完成”。
     收起

     自动换行

     深色代码主题

     复制

     .onClick(() => {
       this.isRunning = !this.isRunning;
       if (this.textState && !this.isRunning && this.progressIndex < 100) {
         this.textState = '继续';
       }
       let timer = setInterval(() => {
         if (this.isRunning && this.progressIndex < 100) {
           this.progressIndex++;
           this.textState = `${this.progressIndex}%`;
           if (this.progressIndex === 100) {
             this.textState = '已完成';
             this.isRunning = false;
           }
         } else {
           clearInterval(timer);
         }
       }, 20);
     })

  3. 设置Progress组件的高度。
     收起

     自动换行

     深色代码主题

     复制

     Progress({ value: this.progressIndex, total: 100, type: ProgressType.Capsule })
       .width(300)
       .height(100)  // 设置Progress组件的高度

• 完整示例参考如下：
  收起

  自动换行

  深色代码主题

  复制

  @Entry
  @Component
  struct PushButton {
    @State progressIndex: number = 0;
    @State textState: string = '下载';
    @State isRunning: boolean = false;
  
    build() {
      Column({ space: 20 }) {
        Progress({ value: this.progressIndex, total: 100, type: ProgressType.Capsule })
          .width(300)
          .height(100)  // 设置Progress组件的高度
          .color(Color.Blue)
          .margin({top:300})
          .style({
            borderWidth: 1,
            content: this.textState, // 设置按钮文字
            font: { size: 13, style: FontStyle.Normal },
            enableScanEffect: false,
            showDefaultPercentage: false
          })
  
          .onClick(() => {
            this.isRunning = !this.isRunning;
            if (this.textState && !this.isRunning && this.progressIndex < 100) {
              this.textState = '继续';
            }
            let timer = setInterval(() => {
              if (this.isRunning && this.progressIndex < 100) {
                this.progressIndex++;
                this.textState = `${this.progressIndex}%`;
                if (this.progressIndex === 100) {
                  this.textState = '已完成';
                  this.isRunning = false;
                }
              } else {
                clearInterval(timer);
              }
            }, 20);
          })
      }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 })
    }
  }