DEV Community

RogueYBJ
RogueYBJ

Posted on

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()
Enter fullscreen mode Exit fullscreen mode

二、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)
Enter fullscreen mode Exit fullscreen mode

三、Create component、Update the data

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

四、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%')
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Calling method

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

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

Top comments (0)