HarmonyOS 鸿蒙Next 如何实现一个对话框样式的pages

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何实现一个对话框样式的pages 我有一个页面需要实现成Dialog样式，背景需要透明，占据下半部分屏幕，如果使用CustomDialog会有很多限制，例如无法直接嵌套弹出对话框，需要回调再弹出，这会增加调用方的业务复杂度，请问在鸿蒙里有没有好的实现方案？

Dialog样式Page

Harmonyos Next教程
2 回复

CustomDialog中有个 onWillDismiss 交互式关闭回调函数，在回调函数中可以通过 reason 得到阻拦关闭弹窗的操作类型，从而根据原因选择是否能关闭弹窗。链接

可以尝试通过设置子窗口的方式，设置子窗口透明化

伪代码如下：

1、EntryAbility.ts

export default class EntryAbility extends UIAbility {

...

onWindowStageCreate(windowStage: window.WindowStage): void {

...

AppStorage.setOrCreate("windowStage",windowStage)//保存windowStage

...

}

...

2、APage.ets

import window from '@ohos.window';

@Component

struct APage {

  build() {

    Row() {

      Column() {

        Button("pageA").onClick(() => {

          let windowStage_: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;

          windowStage_.createSubWindow("subWindow", (err, win) => { //创建透明子窗口并打开

            win.setUIContent('pages/BPage');

            win.showWindow();

          })

        })

      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

3、BPage.ets

import window from '@ohos.window';

@Entry
@Component

struct BPage {

  @State message: string = 'BPage';

  aboutToAppear() {

    window.findWindow("subWindow").setWindowBackgroundColor("#00000000")//设置子窗口背景透明

  }

  onBackPress() { //关闭子窗口

    window.findWindow("subWindow").destroyWindow().then((res) => {

      console.log("destroyWindow success")

    }).catch(() => {

      console.log("destroyWindow fail")

    })

    return true
  }

  build() {

    Row() {

      Column() {

        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .backgroundColor("#32ffffff")//组件背景，可以修改为#00000000透明
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 如何实现一个对话框样式的pages的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中实现一个对话框样式的Pages，通常涉及到使用ArkUI框架进行开发。以下是一个简要的实现方法：

HarmonyOS提供了丰富的UI组件，你可以通过组合这些组件来创建一个对话框样式的页面。具体步骤如下：

  1. 创建DialogPage：首先，你需要定义一个DialogPage，这个Page将作为对话框的内容。在DialogPage的布局文件中，你可以添加你需要的UI元素，如文本、按钮等。

  2. 显示DialogPage：然后，在你的主Page中，通过调用相关的API来显示这个DialogPage。鸿蒙系统提供了模态对话框和非模态对话框的显示方式，你可以根据需求选择。

  3. 处理对话框事件：在DialogPage中，你可以为按钮等组件添加点击事件监听器，以处理用户交互。

  4. 关闭对话框：当用户完成操作或点击关闭按钮时，你可以通过调用相关的API来关闭对话框，并返回主Page。

需要注意的是，鸿蒙系统的UI框架和API可能会随着版本的更新而有所变化，因此建议查阅最新的官方文档来获取最准确的信息。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部