HarmonyOS鸿蒙Next中在class文件中没有上下文的情况下弹出一个自定义Dialog

HarmonyOS鸿蒙Next中在class文件中没有上下文的情况下弹出一个自定义Dialog 业务封装时，可能不是个组件而是个class类，类里面封装了接口和统一的处理逻辑，此时如果需要一些自定义弹窗时，直接调用会报is not callable

请教下在此情况下如何弹窗自定义Dialog？

3 回复

自定义组件不支持放在普通函数中，不能封装。

针对您的问题没有上下文的情况下弹出一个自定义Dialog，

目前的弹窗自定义Dialog依赖的仍然是组件，CustomDialog在beta版本可以支持全局自定义弹窗，不依赖UI组件，依赖UIContext

支持在非页面文件中使用。

文档暂时还没发布，可以关注customDialog开源文档：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md

没有上下文的情况下弹出一个自定义Dialog，您可以

使用openCustomDialog创建并弹出dialogContent对应的自定义弹窗，使用Promise异步回调。通过该接口弹出的弹窗内容样式完全按照dialogContent中设置的样式显示，即相当于customdialog设置customStyle为true时的显示效果。

import { GlobalContext } from './GlobalContext'
import { ComponentContent } from '@kit.ArkUI'
let uiContext = GlobalContext.getContext().getObject('UIContext') as UIContext;
let promptAction = uiContext.getPromptAction();
export class Params {
  account: string = ""
  password: string = ""
  constructor(account: string, password: string) {
    this.account = account;
    this.password = password;
  }
}
let contentNode = new ComponentContent(uiContext, wrapBuilder(customDialogBuilder),
  new Params('', ''));
@Builder
export function customDialogBuilder(params: Params) {
  Column() {
    Column() {
      Row() {
        Image($r('app.media.ic_close'))
          .width(26).height(26)
          .onClick(() => {
            closeDialog()
          })
        Text('登录普通账号')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .fontColor('#182431')
        Text('开户')
          .fontSize(14)
          .fontColor('#007dff')
      }
      .width('100%')
      .padding(14)
      .justifyContent(FlexAlign.SpaceBetween)
      Column() {
        TextInput({ placeholder: '帐号名' })
          .maxLength(36)
          .inputStyle()
          .defaultFocus(true)
          .focusable(true)
          .onChange((value: string) => {
            params.account = value
          })
        Divider().strokeWidth(0.5).color('#191919')
        TextInput({ placeholder: '密码' })
          .maxLength(8)
          .type(InputType.Password)
          .inputStyle()
          .onChange((value: string) => {
            params.password = value
          })
        Divider().strokeWidth(0.5).color('#191919')
        Row() {
          Text('找回账号')
            .fontColor('#007dff')
            .fontWeight(FontWeight.Medium)
            .margin({ top: 4 })
            .onClick(() => {
            })
          Divider().vertical(true).height(12).color('#66182431').margin({ left: 4, right: 4 })
          Text('忘记密码')
            .fontColor('#007dff')
            .fontWeight(FontWeight.Medium)
            .margin({ top: 4 })
            .onClick(() => {
            })
        }
        .width('100%')
        .margin({top: 8})
        .justifyContent(FlexAlign.End)
        Button('登录', { type: ButtonType.Capsule })
          .width('100%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007dff')
          .margin({ top: 20, bottom: 14 })
          .onClick(() => {
            // 更新数据
            contentNode.update(params);
            closeDialog()
          })
      }
      .width('100%')
      .height(260)
      .padding({ left: 14, right: 14 })
      .alignItems(HorizontalAlign.Start)
    }
    .backgroundColor(Color.White)
    .width('100%')
    .borderRadius({ topLeft: 16, topRight: 16 })
    .offset({ x: 0, y: 15 })
    .padding({bottom: 20})
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.End)
}
@Extend(TextInput)
function inputStyle() {
  .placeholderColor('#99182431')
  .backgroundColor(Color.Transparent)
  .height(45)
  .width('100%')
  .padding(0)
  .margin(0)
}
function closeDialog() {
  promptAction.closeCustomDialog(contentNode);
}
export function openPromptCustomDialog() {
  promptAction.openCustomDialog(contentNode, {
    // 防止系统back 导致弹框关闭
    onWillDismiss:(dismissDialogAction: DismissDialogAction) => {
    },
    transition: TransitionEffect.OPACITY.animation({ duration: 100 }).combine(TransitionEffect.translate({ y: 150 }))
  })
}

更多关于HarmonyOS鸿蒙Next中在class文件中没有上下文的情况下弹出一个自定义Dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，如果需要在没有上下文的情况下弹出一个自定义Dialog，可以通过获取全局的ApplicationContext来实现。具体步骤如下：

  1. 获取ApplicationContext：在HarmonyOS中，可以通过AbilityPackage的getContext()方法获取全局的ApplicationContext。

  2. 创建Dialog：使用获取到的ApplicationContext来创建自定义Dialog。

  3. 显示Dialog：调用Dialog的show()方法来显示Dialog。

代码示例如下：

import { AbilityPackage } from '@ohos.application.AbilityPackage';
import { CommonDialog } from '@ohos.commonDialog';

const context = AbilityPackage.getContext();

const customDialog = new CommonDialog(context);
customDialog.setTitle("自定义标题");
customDialog.setMessage("这是一个自定义Dialog");
customDialog.setButton("确定", () => {
    // 点击确定按钮后的操作
});
customDialog.show();

这段代码首先通过AbilityPackage.getContext()获取全局的ApplicationContext，然后使用这个上下文创建了一个自定义的CommonDialog，并设置了标题、消息和按钮的点击事件，最后调用show()方法显示Dialog。

在HarmonyOS鸿蒙Next中，如果需要在没有上下文的情况下弹出自定义Dialog，可以使用AbilityContext或ApplicationContext作为上下文。具体步骤如下：

  1. 获取全局上下文：通过GlobalContext或ApplicationContext获取全局上下文。
  2. 创建Dialog：使用获取的上下文创建自定义Dialog。
  3. 显示Dialog：调用show()方法显示Dialog。

示例代码：

Context context = GlobalContext.getContext(); // 获取全局上下文
CustomDialog dialog = new CustomDialog(context); // 创建自定义Dialog
dialog.show(); // 显示Dialog

这种方式适用于没有直接Activity或Ability上下文的情况。

回到顶部