Harmony-Free Hengong Loading Frame

Hello, dear students! Good morning! Today, we are going to talk about the commonly used loading box function in HONAM. It is developed based on the Overlay layer. During the development process, the loading box can be seen everywhere. Whenever there is an asynchronous operation with a delay involved, it needs to be displayed to prevent the page from being unresponsive and causing a poor user experience.

一、Understand Overlay. Overlay is a layer of covering on top of getUIContext.

let context = getContext() as common.UIAbilityContext
let overlay = context.windowStage.getMainWindowSync().getUIContext().getOverlayManager()

二、Add, delete, display, and hide overlay components

// Add overlay component
overlay.addComponentContent(content)
// Remove the overlay component
overlay.removeComponentContent(content)
// Display the overlay component
overlay.showComponentContent(content)
// Hidden Overlay Component
overlay.hideComponentContent(content)

三、Create component、Update the data

// Create component
let content = new ComponentContent(this.getUIContext(), builder, args)
// Update the data
content.update(args)

四、Custom builder component, with six states: loading, success, failure, info, warn, and progress.

export enum LoadingState {
  loading = 'sys.symbol.loading',
  success = 'sys.symbol.checkmark',
  failure = 'sys.symbol.xmark',
  info = 'sys.symbol.info_circle',
  warn = 'sys.symbol.exclamationmark_circle',
  progress = 'sys.symbol.progress'
}

export interface LoadingParamFace {
  state?: LoadingState
  msg: string
  progress?: number
  progressColor?: number | string
  total?: number
  data?: object
}

@Builder
function loadingCustom(param: LoadingParamFace) {
  Column() {
    Column() {
      if (param.state ?? LoadingState.loading == LoadingState.loading) {
        LoadingProgress().width(50).height(50).color(0xFF444444)
      } else if (param.state == LoadingState.progress) {
        Progress({ value: param.progress, total: param.total, type: ProgressType.Ring })
          .width(50)
          .padding(5)
          .style({ strokeWidth: 3, enableScanEffect: true })
      } else {
        Text() {
          SymbolSpan($r(param.state))
        }.fontSize(40)
        .padding(5).fontColor(0xFF444444)
      }
      Text(param.msg ?? "Loading...").fontSize(14).fontColor(0xFF444444)
    }.backgroundColor(Color.White).padding(20).borderRadius(10)
  }.backgroundColor(0x30000000).justifyContent(FlexAlign.Center).height('100%').width('100%')
}

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Please use the following command to install it.

ohpm install @free/loading

Calling method

// Display the loading loading box Loading.show({state:LoadingState.loading})
// Hide the loading loading box 
Loading.hide()

If you like this content, please give a little heart!