HarmonyOS鸿蒙Next中overlay属性浮层和LoadingProgress()组件结合使用，导致LoadingProgress动画停顿

开发者你好

参考LoadingProgress文档说明：加载动效在组件不可见时停止，组件的可见状态基于onVisibleAreaChange处理，可见阈值ratios大于0即视为可见状态。

因为overlay属性对应的Builder结构不会上树，不在组件树上，所以LoadingProgress组件一直处于不可见状态，而LoadingProgress在不可见时动画会停止，所以出现了动画不动的现象。

【解决方案】

开发者可以参考以下方案，将LoadingProgress组件挂载到overlayManager上，通过overlayManager打开或者关闭动画。

示例demo如下：

import { webview } from '@kit.ArkWeb';
import { ComponentContent } from '@kit.ArkUI';

@Builder
function LoadingProgressOverlay() {
  LoadingProgress()
    .width(60)
    .height(60)
    .enableLoading(true)
    .onAppear(() => {
      console.log('onAppear');
    })
    .onVisibleAreaChange([0, 0.5], (isExpanding, value) => {
      console.log('', isExpanding, value);
    })
}

@Entry
@ComponentV2
struct Index {
  // web组件是否加载中
  @Local isWebLoading: boolean = true;
  webViewController: webview.WebviewController = new webview.WebviewController();

  @Builder
  LoadingProgressOverlay() {
    LoadingProgress()
      .width(60)
      .height(60)
      .enableLoading(this.isWebLoading)
      .onAppear(() => {
        console.log('', 'onAppear');
      })
      .onVisibleAreaChange([0, 0.5], (isExpanding, value) => {
        console.log('', isExpanding, value);
      })
  }

  build() {
    Column() {
      Web({
        src: '',
        controller: this.webViewController,
      })
        .onPageBegin(() => {
          this.isWebLoading = true;
          this.getUIContext().getOverlayManager().addComponentContent(new ComponentContent(this.getUIContext(), wrapBuilder(LoadingProgressOverlay)));
          this.getUIContext().getOverlayManager().showAllComponentContents();
        })
        .onPageEnd(() => {
          this.isWebLoading = false;
          this.getUIContext().getOverlayManager().hideAllComponentContents();
        })
        .width('100%')
        .height('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundColor($r('sys.color.background_secondary'))
    .padding(8)
  }
}