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

#### 问题现象

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

#### 背景知识

[Progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-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 })
      }
    }