HarmonyOS鸿蒙Next中沉浸式效果使用组件安全区方案时如何弹出全屏遮罩

HarmonyOS鸿蒙Next中沉浸式效果使用组件安全区方案时如何弹出全屏遮罩 沉浸式效果使用组件安全区方案时如何弹出全屏遮罩

3 回复 
import { hilog } from '@kit.PerformanceAnalysisKit';

@CustomDialog

struct CustomDialogExample {
  @Link textValue: string
  @Link inputValue: string
  controller?: CustomDialogController
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }
  build() {
    Column() {
      //可在这里自定义显示内容
    }.borderRadius(10)
  }
}

@Entry
@Component
struct Index {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => { this.onCancel() },
      confirm: () => { this.onAccept() },
      textValue: $textValue,
      inputValue: $inputValue
    }),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: true,
    cornerRadius: 10,
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Brown)
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
  }
}

更多关于HarmonyOS鸿蒙Next中沉浸式效果使用组件安全区方案时如何弹出全屏遮罩的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用组件安全区方案实现沉浸式效果时，弹出全屏遮罩可以通过Window组件和FullScreenWindow组件来实现。Window组件用于创建窗口，而FullScreenWindow组件则用于创建全屏窗口。通过设置FullScreenWindow的immersive属性为true，可以实现沉浸式效果。同时，使用WindowManager的addWindow方法将全屏窗口添加到当前窗口层级中，即可实现全屏遮罩的弹出。具体代码示例如下：

import window from '@ohos.window';

// 创建全屏窗口
let fullScreenWindow = window.create(context, "fullScreenWindow", window.WindowType.TYPE_FULL_SCREEN);

// 设置沉浸式效果
fullScreenWindow.setWindowImmersive(true);

// 添加全屏窗口
window.getTopWindow().then((topWindow) => {
  topWindow.addWindow(fullScreenWindow);
});

在HarmonyOS Next中，使用沉浸式效果时，可以通过WindowManager和WindowInsets实现全屏遮罩。具体步骤如下：

  1. 设置窗口为全屏模式：

    getWindow().getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
getWindow().setStatusBarColor(Color.TRANSPARENT);

  2. 添加安全区处理：

    View decorView = getWindow().getDecorView();
decorView.setOnApplyWindowInsetsListener((v, insets) -> {
    // 处理安全区
    return insets;
});

  3. 弹出全屏遮罩：

    View overlayView = new View(this);
overlayView.setBackgroundColor(Color.BLACK);
overlayView.setAlpha(0.5f);
getWindow().addContentView(overlayView, new ViewGroup.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT,
    ViewGroup.LayoutParams.MATCH_PARENT));

通过以上步骤，即可在沉浸式效果中弹出全屏遮罩。

回到顶部