鸿蒙全局loading弹窗方法封装-自定义展示loading动画

在之前预览版本只能通过子窗口的形式来封装全局loading弹窗，还要使用到缓存，这就不符合我们的本意了，6月22号升级到beta1之后看了下文档可以通过getUIContext来进行弹窗展示了，下面就展示封装的方法

先引入ComponentContent，window，PromptAction，用于创建弹窗，AnyType是我自定义的ts的any类型，在ets引入ts，ts里声明一个AnyTypt为any

import { AnyType } from '@common/types';

import { ComponentContent, window, PromptAction} from '@kit.ArkUI';

@Extend(GridItem) function loadingIconItem(){ .width('20lpx') .height('20lpx') .borderRadius('10lpx') } @Component struct LoadingAnimation{ @State rotateAngle:number = 0 build() { Grid(){ GridItem() .backgroundColor('#6F94B3') .loadingIconItem()

<code class="language-plain has-numbering hljs" id="code_id_0">GridItem()
    .backgroundColor('#0F4C81')
    .loadingIconItem()
  GridItem()
    .backgroundColor('#B7C9D9')
    .loadingIconItem()
  GridItem()
    .backgroundColor('#6F94B3')
    .loadingIconItem()
}
.rotate({
  x:0,
  y:0,
  z:1,
  centerX: '50%',
  centerY: '50%',
  angle:this.rotateAngle,
})
.width('60lpx')
.height('60lpx')
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')</code>

} onDidBuild(): void { animateTo({ duration: 1000, curve: Curve.Linear, iterations: -1, }, () => { this.rotateAngle = 360 })

} }

class Params {

 text: string = ""

 constructor(text: string) {

   this.text = text;

 }

}

@Builder

function loadingBuilder(params:Params){

 Column({space:'26lpx'}){

   LoadingAnimation()

   Text(params.text)

     .fontColor('#666666')

     .fontSize('24lpx')

 }

 .width('200lpx')

}

class Loading{ private static loadingDialog:ComponentContent | null = null private static promptAction:PromptAction show(text:string = '加载中...'){ window.getLastWindow(getContext()).then((windowClass)=>{ const uiContext = windowClass.getUIContext() Loading.loadingDialog = new ComponentContent(uiContext, wrapBuilder(loadingBuilder),new Params(text)); Loading.promptAction = uiContext.getPromptAction() Loading.promptAction.openCustomDialog(Loading.loadingDialog, { alignment:DialogAlignment.Center, isModal:true, autoCancel:false } )

<code class="language-plain has-numbering hljs" id="code_id_1">// const component =  uiContext.getComponentUtils()
})</code>

} hide(){ Loading.promptAction.closeCustomDialog(Loading.loadingDialog) } }