HarmonyOS 自定义弹窗如何与Component双向同步一些变量？

弹窗与组件如何双向绑定一些状态？

我在弹出弹窗的page里面定义了@Provide修饰的变量，在Dialog里面定义了@Consum修饰的同名变量，会直接报错如下：

Error message:@Component 'CommentDialog'[2578] missing @Provide property with name COMMENT_DIALOG_SHOW_REPLY.  
Fail to resolve @Consume(COMMENT_DIALOG_SHOW_REPLY).1.
2.

HarmonyOS

zbw_apple

2024-10-25 12:02:22

浏览

回答 1

按赞同

按时间

Heiang

自定义弹窗和页面变量传递：方式一：

@CustomDialog  
struct CustomDialog01 {  
  @Link inputValue: string;  
  controller: CustomDialogController;  
  
  build() {  
    Column() {  
      Text('Change text')  
        .fontSize(20)  
        .margin({ top: 10, bottom: 10 })  
      TextInput({ placeholder: '', text: this.inputValue })  
        .height(60)  
        .width('90%')  
        .onChange((value: string) => {  
          this.inputValue = value;  
        })  
    }  
  }  
}  
  
@Entry  
@Component  
struct DialogDemo01 {  
  @State inputValue: string = 'click me';  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialog01({  
      inputValue: $inputValue  
    })  
  })  
  
  build() {  
    Column() {  
      Button(this.inputValue)  
        .onClick(() => {  
          this.dialogController.open();  
        })  
        .backgroundColor(0x317aff)  
    }  
    .width('100%')  
    .margin({ top: 5 })  
  }  
}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.

方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。

@CustomDialog  
struct CustomDialog02 {  
  private inputValue: string = '';  
  changeInputValue: (val: string) => void = () => {  
  };  
  ;  
  controller: CustomDialogController;  
  
  build() {  
    Column() {  
      Text('Change text')  
        .fontSize(20)  
        .margin({ top: 10, bottom: 10 })  
      TextInput({ placeholder: '', text: this.inputValue })  
        .height(60)  
        .width('90%')  
        .onChange((value: string) => {  
          this.changeInputValue(value);  
        })  
    }  
  }  
}  
  
@Entry  
@Component  
struct DialogDemo02 {  
  @State inputValue: string = 'click me';  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialog02({  
      inputValue: this.inputValue,  
      changeInputValue: (val: string) => {  
        this.inputValue = val;  
      }  
    })  
  })  
  
  build() {  
    Column() {  
      Button(this.inputValue)  
        .onClick(() => {  
          this.dialogController.open();  
        })  
        .backgroundColor(0x317aff)  
    }  
    .width('100%')  
    .margin({ top: 5 })  
  }  
}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.

方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。

let storage = LocalStorage.getShared();  
@CustomDialog  
struct CustomDialog03 {  
  @LocalStorageLink('inputVal') inputValue: string = '';  
  controller: CustomDialogController;  
  
  build() {  
    Column() {  
      Text('Change text')  
        .fontSize(20)  
        .margin({ top: 10, bottom: 10 })  
      TextInput({ placeholder: '', text: this.inputValue })  
        .height(60)  
        .width('90%')  
        .onChange((value: string) => {  
          this.inputValue = value;  
        })  
    }  
  }  
}  
  
@Entry(storage)  
@Component  
struct DialogDemo03 {  
  @LocalStorageLink('inputVal') inputValue: string = 'click me';  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialog03()  
  });  
  
  build() {  
    Column() {  
      Button(this.inputValue)  
        .onClick(() => {  
          this.dialogController.open();  
        })  
        .backgroundColor(0x317aff)  
    }  
    .width('100%')  
    .margin({ top: 5 })  
  }  
}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.

2024-10-25 15:20:03

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义弹窗如何与Component双向同步一些变量？

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