HarmonyOS 自定义弹框封装问题

//调用方式
loadingDia: cusDialog = new cusDialog()

aboutToAppear() {
  this.loadingDia.showDialog()
}
1.
2.
3.
4.
5.
6.

//自定义控件
@Component
export struct cusDialog {
  showDialog() {
    const dialog: CustomDialogController = new customDialogcontroller({
      builder: CustomDialogExample()
      customstyle: true
    })
    dialog.open()
  }

  build() {
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

@Component
export struct cusDialog {
  dialog: CustomDialogController | undefined

  showDialog() {
    this.dialog:
    CustomDialogController = new customDialogcontroller({
      builder: CustomDialogExample()
      customstyle: true
    })
    this.dialog.open()
  }

  closeDialog() {
    this.dialog.close()
  }

  build() {
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

上面那么写运行都没有问题，想把cusDialog中的dialog变成公共变量，但在运行loadingDia: cusDialog =new cusDialog()就报Error message:Cannot read property dialog of undefined应该怎么改？

HarmonyOS

Excelsior_abit

2024-12-25 13:13:05

浏览

回答 1

按赞同

按时间

fox280

可以使用AppStorage来传递dialog，这样dialog可以在打开和关闭方法中使用，相当于公共变量，示例代码如下：

@Entry
@Component
struct Index12 {
  @State message: string = 'Hello World';
  loadingDia: cusDialog = new cusDialog()

  build() {
    Column() {
      Button('打开').onClick(() => {

        this.loadingDia.showDialog() //弹出

      })

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

//自定义控件
@Component
export struct cusDialog {
  showDialog() {
    const dialog: CustomDialogController = new CustomDialogController({
      builder: CustomDialogExample()
    })
    AppStorage.setOrCreate('dialog', dialog)
    //测试传值是否有效
    AppStorage.setOrCreate('dialog1', 1)
    dialog.open()
  }

  closeDialog() {
    const dialog: CustomDialogController = AppStorage.get('dialog')!
    const dialog1: number = AppStorage.get('dialog1')!
    //测试接值是否有效
    console.log(`dialog1:${dialog1}`)
    dialog.close()
  }

  build() {

  }
}

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController;
  loadingDia: cusDialog = new cusDialog()

  build() {
    Column() {
      Text('这是一个弹窗')
        .textAlign(TextAlign.Center)
      Button('关闭').onClick(() => {
        //此方法的具体调用时机视业务场景而定
        this.loadingDia.closeDialog() //关闭
      })
    }.width('100%').height('80%')
  }
}
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.

AppStorage的官网文档参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-state-management-V5#appstorage

2024-12-25 15:36:18

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义弹框封装问题

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