HarmonyOS 自定义全局dialog

想做一个全局通用的dialog，发现弹层效果和弹出内的UI层（也就是builder）必须要分开写，一点通用性和可复用性也没有。

退而求其次，弹层设置和内容UI层各自封装。在使用的地方在组装。发现dialogID无法传到UI层，请问我要怎么关闭这个碳层。

@Builder
function dialogCustomView(n: number) {
  Column() {
    Text("这里是标题")
    Text("这里是描述, 当前弹窗id：" + n)
    Row() {
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(n);
      })
      Button("确定")
    }
  }
  .width("100%")
}


@Preview
@Entry
@Component
struct DialogExample {
  @State dialogId: number = 0;

  @Builder
  dialogCustomView() {
    dialogCustomView(this.dialogId)
  }

  async show() {
    this.dialogId = await promptAction.openCustomDialog({
      builder: () => this.dialogCustomView(),
      backgroundColor: "#fff",
      maskColor: "rgba(0,0,0,0.6)",
      autoCancel: false
    })
  }

  build() {
    Column() {
      Button("点击弹窗").onClick(() => {
        this.show();
      })
    }.width("100%").height("100%")
  }
}

HarmonyOS

put_get

2025-01-09 14:29:04

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

自定义全局弹框可以参考下述demo：

//1：
onWindowStageCreate(windowStage: window.WindowStage): void {
  //在EntryAbility的onWindowStageCreate方法里通过AppStorage定义关于弹框显示的全局属性，默认false不显示
  AppStorage.setOrCreate('showGlobalCustomDialog', false)
  //通过AppStorage定义弹窗显示文本
  AppStorage.setOrCreate('showLoadingText', "请稍候...")
}

  //2：
import { CustomLoading } from '../pages/CustomLoading'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct CustomDialogPage {
  //自定义弹窗是否显示
  @StorageLink('showGlobalCustomDialog') @Watch('globalCustomDialogStateChange') showGlobalCustomDialog: boolean = false
  @StorageLink('showLoadingText') text: string = ""
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomLoading({text: this.text}),
    alignment: DialogAlignment.Center,
    autoCancel:false,
    customStyle:true,
    cancel:(() => {
      AppStorage.setOrCreate('showGlobalCustomDialog', false)
    })
  })
  globalCustomDialogStateChange() {
    if (this.showGlobalCustomDialog) {
      if (this.dialogController != null) {
        this.dialogController.open()
      }
    }else{
      this.dialogController?.close()
    }
  }

  build() {

  }
}

//3：
@CustomDialog
export struct CustomLoading {
  controller?: CustomDialogController
  @Prop text: string;
  build() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {
        LoadingProgress().width(30).height(30).color(Color.White)
        Text(this.text)
          .fontColor(Color.White)
          .fontSize(16)
          .margin({ top: 15 })
          .width('100%')
          .textAlign(TextAlign.Center)
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#88000000')
      .borderRadius(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Transparent)
  }
}

//4：显示弹窗并修改文本
AppStorage.setOrCreate('showLoadingText', "测试中...")
AppStorage.setOrCreate('showGlobalCustomDialog', true)
//隐藏 
AppStorage.setOrCreate('showGlobalCustomDialog', false)

2025-01-09 17:35:39

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义全局dialog

订阅鸿蒙技术特刊，精选内容抢先看