HarmonyOS 自定义 loading 效果

大致思路

主要利用 Progress 组件

利用aboutToAppear周期函数：在创建自定义组件的新实例后，在执行其build()函数之前执行

利用aboutToDisappear函数在自定义组件析构销毁之前执行，这里主要用来清除定时器

实现效果

组件封装

components/HmLoading.ets

@Preview // 表示该组件可预览 Preview只能看效果 没有交互
@Component

export struct HmLoading {
  @State // 响应式驱动视图
  value: number = 0

  timer: number = -1  // 显示声明

  // 在创建自定义组件的新实例后，在执行其build()函数之前执行
  aboutToAppear(): void {
    this.timer = setInterval(() => {
      if(this.value === 100) {
        this.value = 0
      }
      this.value++
    }, 10)
  }

  // 
  aboutToDisappear(): void {
    clearInterval(this.timer)
  }

  build() {
    Progress({
      total: 100,
      value: this.value,
      type: ProgressType.Ring
    })
  }
}

// 默认导出
export default HmLoading  // 一个文件只能有一个默认导出
// 按需导出
// export { HmLoading, HmLoading1, HmLoading3 }

pages/Index.ets

import HmLoading from './components/HmLoading';

@Entry
@Component
struct Index {
  @State showLoading: boolean = false;

  // 页面刚进入 应该去获取数据  等待的过程中 显示进度 数据获取完 进度消失
  // 钩子函数
  aboutToAppear(): void {
    // 请求数据
    // setTimeout/setInterval
    this.showLoading = true
    setTimeout(() => {
      this.showLoading = false
    },10000)
  }

  build() {
    Row() {
      Column() {
        if(this.showLoading) {
          HmLoading()
        }
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}