在之前预览版本只能通过子窗口的形式来封装全局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()

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')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

} 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 } )

// const component =  uiContext.getComponentUtils()
})
  • 1.
  • 2.

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