HarmonyOS鸿蒙Next开发中如何拉起自定义的弹出框

HarmonyOS鸿蒙Next开发中如何拉起自定义的弹出框 在claas或者function里面想要拉起自定义的弹出框，这个要怎么实现，自带的alert可以用，自定义的提示不能使用

3 回复

参考以下代码示例：

//主页面
//在@entry中先设置builder，再直接调用showTest即可
import { customDialogBuilder, changeDialogBuilder, MyShowTest } from '../pages/Page'
let myShowTest = new MyShowTest()
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  onPageShow(): void {
    changeDialogBuilder(customDialogBuilder.bind(this))
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            myShowTest.showTest()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

//自定义class类
// 自定义弹窗.ets
import promptAction from '@ohos.promptAction'
let myDialogBuilder: CustomBuilder;
let customDialogId: number = 0

@Builder
export function customDialogBuilder() {
  Column() {
    Text('Custom dialog Message').fontSize(10)
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
  }.height(200).padding(5)
}

export function changeDialogBuilder(builder: CustomBuilder) {
  myDialogBuilder = builder
}

export class MyShowTest{
  showTest() {
    if (myDialogBuilder === undefined) {
      return
    }
    promptAction.openCustomDialog({
      builder: myDialogBuilder
    }).then((dialogId: number) => {
      customDialogId = dialogId
    })
  }
}

//改变customDialogBuilder() 为如下代码（Column 增加backGroundColor 和 width 属性），可自定义弹窗背景颜色
@Builder
export function customDialogBuilder() {
  Column() {
    Text('Custom dialog Message').fontSize(10)
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
  }.height(200).padding(5).backgroundColor(Color.Green).width('100%')
}

//使用backgroundImage和backgroundImageSize(ImageSize.Cover) 替换 backgroundColor 可达到类似的效果，但是弹窗的宽度大小现在不能改变

更多关于HarmonyOS鸿蒙Next开发中如何拉起自定义的弹出框的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next开发中，拉起自定义的弹出框可以通过使用CustomDialog组件实现。首先，创建一个继承自CustomDialog的类，并在其中定义弹出框的布局和逻辑。然后，在需要的地方实例化该自定义对话框并调用show()方法显示。

例如，定义一个MyCustomDialog类：

import { CustomDialog, CommonDialogStyle } from '@ohos.arkui.advanced.CustomDialog';

class MyCustomDialog extends CustomDialog {
    constructor(context: Context) {
        super(context);
        this.setStyle(CommonDialogStyle.CUSTOM);
        this.setLayout("my_custom_dialog_layout");
    }

    onShow() {
        // 弹出框显示时的逻辑
    }

    onDismiss() {
        // 弹出框消失时的逻辑
    }
}

在需要显示弹出框的地方：

let dialog = new MyCustomDialog(this.context);
dialog.show();

通过这种方式，可以在HarmonyOS鸿蒙Next中拉起自定义的弹出框。

在HarmonyOS鸿蒙Next开发中，拉起自定义弹出框可以通过CustomDialog实现。首先，创建一个继承自CustomDialog的类，重写onCreateComponent方法以定义布局。然后，在需要的地方实例化该对话框并调用show()方法显示。例如：

public class MyCustomDialog extends CustomDialog {
    public MyCustomDialog(Context context) {
        super(context);
    }

    @Override
    protected Component onCreateComponent() {
        // 定义弹出框布局
        return new Text(getContext()).setText("Hello, Custom Dialog!");
    }
}

// 使用
MyCustomDialog dialog = new MyCustomDialog(context);
dialog.show();
回到顶部