如何在一个非@Entry的类中创建一个CustomDialogController弹窗

应用调用服务端接口返回数据,在非页面的代码模块中处理数据后进行一个弹窗组件创建的弹出,并且让这个弹窗弹在当前显示的页面窗口。

HarmonyOS
2024-09-04 09:29:27
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

可以参考以下demo是否满足。

// 自定义弹窗.ets 
import promptAction from '@ohos.promptAction' 
 
let myDialogBuilder: CustomBuilder; 
let customDialogId: number = 0 
 
@Builder 
export function customDialogBuilder() { 
  Column() { 
    Row() { 
      Button('确认').fontSize(20) 
        .onClick(() => { 
          promptAction.closeCustomDialog(customDialogId) 
        }) 
      Button('取消').fontSize(20) 
        .onClick(() => { 
          promptAction.closeCustomDialog(customDialogId) 
        }) 
    } 
  }.height(200).padding(5) 
  .backgroundColor(Color.Transparent) 
  .width('100%') 
} 
 
export function changeDialogBuilder(builder: CustomBuilder) { 
  myDialogBuilder = builder 
} 
 
 
export class MyShowTest { 
  showTest() { 
    if (myDialogBuilder === undefined) { 
      return 
    } 
    promptAction.openCustomDialog({ 
      builder: myDialogBuilder 
    }).then((dialogId: number) => { 
      customDialogId = dialogId 
    }) 
  } 
}
//在@entry中先设置builder,再直接调用showTest即可 
export 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%') 
 
    .backgroundColor(Color.Orange) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.

可以先把this通过GlobalContext存起来,使用时取出。

首页:

import { GlobalContext } from './GlobalContext' 
import { testPromptDialog } from './HttpUtil' 
 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World' 
 
  aboutToAppear(): void { 
    GlobalContext.getContext().setObject('UIContext', this) 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            testPromptDialog() 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
 
    .backgroundColor(Color.Orange) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

GlobalContext:

export class GlobalContext { 
  private constructor() { 
  } 
 
  private static instance: GlobalContext; 
  private _objects = new Map<string, Object>(); 
 
  public static getContext(): GlobalContext { 
    if (!GlobalContext.instance) { 
      GlobalContext.instance = new GlobalContext(); 
    } 
    return GlobalContext.instance; 
  } 
 
  getObject(value: string): Object | undefined { 
    return this._objects.get(value); 
  } 
 
  setObject(key: string, objectClass: Object): void { 
    this._objects.set(key, objectClass); 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

HttpUtil:

import { promptAction } from '@kit.ArkUI'; 
import { GlobalContext } from './GlobalContext'; 
 
 
let customDialogId: number = 0 
 
 
@Builder 
export function customDialogBuilder(content: String) { 
  Column() { 
    Text(`Tip: ${content} `).fontSize(20).height("30%") 
    Text('失败原因:!!!!').fontSize(16).height("30%") 
    Row() { 
      Button("确认").onClick(() => { 
        promptAction.closeCustomDialog(customDialogId) 
      }) 
      Blank().width(50) 
      Button("取消").onClick(() => { 
        promptAction.closeCustomDialog(customDialogId) 
      }) 
    } 
    .margin({top: 30}) 
  }.height(200).padding(5) 
} 
 
export function testPromptDialog() { 
 
  const that = GlobalContext.getContext().getObject('UIContext') as UIContext; 
  if (that) { 
    promptAction.openCustomDialog({ 
      builder: customDialogBuilder.bind(that, "网络请求失败!") 
    }).then((dialogId: number) => { 
      customDialogId = dialogId; 
    }) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
分享
微博
QQ
微信
回复
2024-09-04 16:07:43
相关问题
如何创建一个window?
1100浏览 • 1回复 待解决
entry如何拉起另一个ModuleAbility
5164浏览 • 1回复 待解决
如何创建一个worker线程
1720浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗
1787浏览 • 1回复 待解决
如何实现一个带动画弹窗
1283浏览 • 1回复 待解决
如何在自定义函数创建一个UI组件
2552浏览 • 1回复 待解决
HarmonyOS如何获取一个名称
1974浏览 • 4回复 待解决
如何创建一个ArkTS应用项目?
1204浏览 • 1回复 待解决
求告知如何创建一个地图
1159浏览 • 1回复 待解决
如何创建一个pgsql只读账户?
3192浏览 • 2回复 待解决