HarmonyOS鸿蒙Next中如何控制自定义Dialog跳转的页面显示在Dialog上层？

HarmonyOS鸿蒙Next中如何控制自定义Dialog跳转的页面显示在Dialog上层？ 需要实现的需求是a页面弹窗，跳转b页面，b显示在a页面及弹窗的上方，有没有什么方案？

5 回复

目前无法做到新页面覆盖在弹窗上，因为弹窗与页面不绑定，属于独立的一层。建议使用stack模拟实现dialog的效果

可以通过Stack堆叠布局覆盖在原有的page上面来模拟dialog的效果，stack文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-stack-layout-V5

Stack拟态弹窗参考

@Entry
@Component
struct Index {
  @State bottomOpacity: number = 1;
  @State topOpacity: number = 0;

  popShow() {
    console.info("Pop show ...");
    if (this.topOpacity === 1) {
      return;
    }
    console.info("Pop show start ...");
    this.bottomOpacity = 0.6;
    this.topOpacity = 1;
    console.info("Pop show end ...");
  }

  popHide(): void {
    console.info("Pop hide ...");
    if (this.topOpacity === 0) {
      return;
    }
    console.info("Pop hide start ...");
    this.bottomOpacity = 1;
    this.topOpacity = 0;
    console.info("Pop hide end ...");
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        Text('First child, show in level 1')
          .width('60%')
          .height('20%')
          .align(Alignment.Center)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xd2cab3)
      .justifyContent(FlexAlign.Center)
      .opacity(this.bottomOpacity)

      this.popup();

      Button('Click Me')
        .width('40%')
        .height('10%')
        .backgroundColor(Color.Green)
        .zIndex(3)
        .onClick(() => this.popShow())
    }
    .width('100%')
    .height('100%')
    .margin({ top: 5 })
  }

  @Builder popup() {
    if (this.topOpacity === 1) {
      Column() {
        Text('Second child, show in level2')
          .width('70%')
          .height('20%')
          .align(Alignment.Center)
      }
      .width('70%')
      .height('20%')
      .backgroundColor(0xc1cbac)
      .justifyContent(FlexAlign.Center)
      .position({
        x: 50,
        y: 90
      })
      .opacity(this.topOpacity)
      .onClick(() => this.popHide())
    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何控制自定义Dialog跳转的页面显示在Dialog上层？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


处处是惊喜

用overlay试试，https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5

在HarmonyOS鸿蒙Next中，若需控制自定义Dialog跳转的页面显示在Dialog上层，可以通过以下方式实现：

  1. 使用Window的层级管理：鸿蒙Next中，Window组件支持层级管理。通过设置Window的ZOrder属性，可以控制其显示层级。ZOrder值越大，窗口显示越靠前。

  2. 设置ZOrder属性：在创建跳转页面时，设置其Window的ZOrder属性，使其大于Dialog的ZOrder值。例如：

    let windowClass = new window.Window(this.context);
windowClass.setZOrder(100); // 设置ZOrder值

  3. 使用WindowStage的loadContent方法：在跳转页面加载时，通过WindowStage的loadContent方法加载页面内容，并确保ZOrder设置生效。

  4. Dialog的ZOrder设置：在创建自定义Dialog时，设置其ZOrder属性，确保跳转页面的ZOrder值大于Dialog的值。

  5. 示例代码：

    // 创建Dialog
let dialog = new Dialog(this.context);
dialog.setZOrder(50); // 设置Dialog的ZOrder

// 创建跳转页面
let windowClass = new window.Window(this.context);
windowClass.setZOrder(100); // 设置跳转页面的ZOrder

// 加载跳转页面内容
windowClass.loadContent("pages/NextPage", (err, data) => {
    if (err) {
        console.error("加载页面失败");
        return;
    }
    console.log("页面加载成功");
});

通过上述方法，可以确保跳转页面显示在自定义Dialog的上层。

在HarmonyOS鸿蒙Next中，若需自定义Dialog跳转的页面显示在Dialog上层，可通过以下步骤实现：

  1. 使用PageAbility或UIAbility跳转新页面。
  2. 在跳转时，确保新页面的WindowStage层级高于Dialog的WindowStage。
  3. 使用WindowManager设置新页面的WindowStage为WindowStage.TOP。

示例代码：

Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
    .withDeviceId("")
    .withBundleName("com.example.myapp")
    .withAbilityName("com.example.myapp.MainAbility")
    .build();
intent.setOperation(operation);
startAbility(intent);

WindowStage windowStage = getWindowStage();
windowStage.setWindowStageLevel(WindowStage.TOP);
回到顶部