希望在网络加载的时候页面整体加一个遮罩层

import { View, Text } from '@arkui/components';

function LoadingOverlay() {
  return (
    <View style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.5)',
      zIndex: 1000,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <Text style={{ color: '#FFF' }}>Loading...</Text>
    </View>
  );
}

export default LoadingOverlay;

import { useState } from '@arkui/hooks';
import LoadingOverlay from './LoadingOverlay';

function withLoadingOverlay(WrappedComponent: any) {
  return function ComponentWithLoading(props: any) {
    const [isLoading, setIsLoading] = useState(false);

    const showLoading = () => setIsLoading(true);
    const hideLoading = () => setIsLoading(false);

    return (
      <>
        <WrappedComponent {...props} showLoading={showLoading} hideLoading={hideLoading} />
        {isLoading && <LoadingOverlay />}
      </>
    );
  };
}

export default withLoadingOverlay;

import { Stack, Button, Text } from '@arkui/components';
import withLoadingOverlay from './withLoadingOverlay';
import { useEffect } from '@arkui/hooks';

function Page1({ showLoading, hideLoading }: any) {
  useEffect(() => {
    // 模拟网络请求
    showLoading();
    setTimeout(() => {
      hideLoading();
    }, 3000);
  }, []);

  return (
    <Stack style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Page 1 Content</Text>
      <Button onClick={showLoading}>Show Loading</Button>
    </Stack>
  );
}

export default withLoadingOverlay(Page1);

@CustomDialog  
struct CustomDialogExample {  
  controller: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample({}),  
  })  
  
  build() {  
    Column() {  
      Image($r('app.media.icon'))  
        .width(80)  
        .height(80)  
    }  
  }  
}  
@Entry  
@Component  
struct OverlayExample {  
  private isShowLoading:Boolean = true;  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample(),  
  })  
  
  aboutToAppear(){  
    this.dialogController.open()  
    setTimeout(()=>{  
      this.dialogController.close()  
    },2000)  
  }  
  @Builder OverlayNode() {  
    Column() {  
      Column()  
        .height('100%')  
        .width('100%')  
        .backgroundColor('rgba(255,255,255,0.8)')  
    }.alignItems(HorizontalAlign.Center)  
  }  
  
  build() {  
    Column() {  
      Column() {  
        Button('OK', { type: ButtonType.Normal, stateEffect: true })  
          .borderRadius(8)  
          .backgroundColor(0x317aff)  
          .width(90)  
          .onClick(() => {  
            console.log('ButtonType.Normal')  
          })  
      }  
      .height(100)  
      .width('100%')  
      .backgroundColor('#000000')  
      .overlay(this.OverlayNode(), { align: Alignment.Center })  
    }.width('100%')  
  }  
}

import { window } from '@kit.ArkUI';  
@Entry  
@Component  
struct GlobalAlpha {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  @State windowWidth: number = 0  
  @State windowHeight: number = 0  
  onPageShow(): void {  
    window.getLastWindow(getContext(this)).then((windowClass) => {  
      let rect: window.Rect = windowClass.getWindowProperties().windowRect;  
      // 导航条高度  
      let avoidArea1 = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);  
      let bottomHeight = avoidArea1.bottomRect.height;  
      // 状态栏高度  
      let avoidArea2 = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_CUTOUT);  
      let statusHeight = avoidArea2.topRect.height;  
      this.windowHeight = px2vp(rect.height - bottomHeight - statusHeight);  
      this.windowWidth = px2vp(rect.width);  
    });  
  }  
  build() {  
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
      Canvas(this.context)  
        .width('100%')  
        .height('100%')  
        .backgroundColor('#2e7fd6')  
        .onReady(() =>{  
          this.context.fillText(String(this.windowHeight), 100, 60)  
          this.context.globalAlpha = 0.4  
          this.context.fillStyle = 'rgb(62, 64, 65)'  
          this.context.fillRect(0, 0, this.windowWidth, this.windowHeight)  
        })  
    }  
    .width('100%')  
    .height('100%')  
  }  
}