HarmonyOS 鸿蒙Next 在class或者function里面如何拉起自定义弹出框,自带的alert可以用但自定义提示无法使用

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

HarmonyOS 鸿蒙Next 在class或者function里面如何拉起自定义弹出框,自带的alert可以用但自定义提示无法使用

在claas或者function里面想要拉起自定义的弹出框,这个要怎么实现,自带的alert可以用,自定义的提示不能使用

2 回复

参考以下代码示例:

//主页面
//在[@entry](/user/entry)中先设置builder,再直接调用showTest即可
import { customDialogBuilder, changeDialogBuilder, MyShowTest } from ‘…/pages/Page’
let myShowTest = new MyShowTest()
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/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](/user/ohos).promptAction’
let myDialogBuilder: CustomBuilder;
let customDialogId: number = 0

[@Builder](/user/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](/user/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系统中,如果你希望在class或者function内部拉起自定义弹出框,而自带的alert功能可以满足基本需求但无法完全满足你的自定义需求,你需要通过自定义Dialog或自定义组件来实现。

具体操作步骤如下:

  1. 定义自定义弹出框的布局:在res/layout目录下创建一个XML文件,定义你的自定义弹出框的布局,包括文本、按钮等元素。

  2. 创建自定义Dialog类:继承Dialog类或者在Activity中动态创建Dialog,并在其构造函数或onCreate方法中设置自定义布局。

  3. 在class或function中实例化并显示Dialog:通过Dialog类的实例,你可以设置Dialog的显示属性(如动画、位置等),并调用show方法将其显示出来。

  4. 处理事件:为自定义弹出框中的按钮或其他交互元素设置事件监听器,以实现用户交互后的逻辑处理。

确保你的自定义弹出框逻辑与UI线程同步,以避免潜在的线程安全问题。如果自定义弹出框仍然无法使用,可能是由于布局文件、资源文件或代码逻辑错误。请仔细检查相关代码和资源文件。

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

回到顶部