如何在http请求期间展示loading组件？

Question

在http请求期间展示loading组件，请求结束后，关闭loading

Answer 1

可以通过Image/LoadingProgress + Text组件 + Stack布局的方式实现自定义loading动态图标和文字展示，并且可以手动控制显示/隐藏。demo如下：

1、ProgressPage.est

import CommonProgress from ‘…/components/CommonProgress’;

@Entry
@Component
struct ProgressPage {
  @State isShow: boolean = false;

  build() {
    Stack() {
      Column() {
        Row() {
          //手动控制显示或隐藏
          Button(‘Show progress’).onClick(() => {
            this.isShow = true;
          })
          Button(‘Hide progress’).onClick(() => {
            this.isShow = false;
          })
        }
      }.width(‘100%’)
      Column() {
        CommonProgress({ isShow: this.isShow });
      }
    }
    .width(‘100%’)
    .height(‘100%’)
  }
}

2、CommonProgress.ets

@Component
export default struct CommonProgress {
  @Prop isShow: boolean;

  build() {
    Column() {
      if (this.isShow) {
        //系统自带动效组件
        LoadingProgress()
          .width(100)
          .color(Color.Blue)

        //自己设计图片实现动效
        Image($r(‘app.media.yes’)).size({ width: 150, height: 150 })

        Text(‘加载中…’)
        .fontSize(18)
          .fontColor(Color.Gray)
      }
    }
  }
}