自定义弹窗中的变量如何传递给页面

【问题描述】

在自定义弹窗内定义的变量内容，在关闭弹窗或变量变化时需要及时传递给页面，可以通过何种方式传递？

【运行环境】

硬件：rk3568；  ROM: 3.2 Beta5 ；  API 9

有以下三种解决措施：
●方式一：使用组件的状态变量传递。
●方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。
●方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。

方式一：

1. @CustomDialog
   
2. struct CustomDialog01 {
   
3.   @Link inputValue: string
   
4.   controller: CustomDialogController
   
5.   build() {
   
6.     Column() {
   
7.       Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
   
8.       TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
   
9.         .onChange((value: string) => {
   
10.           this.inputValue = value
    
11.         })
    
12.     }
    
13.   }
    
14. }
    
15. 
    
16. @Entry
    
17. @Component
    
18. struct DialogDemo01 {
    
19.   @State inputValue: string = 'click me'
    
20.   dialogController: CustomDialogController = new CustomDialogController({
    
21.     builder: CustomDialog01({
    
22.       inputValue: $inputValue
    
23.     })
    
24.   })
    
25. 
    
26.   build() {
    
27.     Column() {
    
28.       Button(this.inputValue)
    
29.         .onClick(() => {
    
30.           this.dialogController.open()
    
31.         }).backgroundColor(0x317aff)
    
32.     }.width('100%').margin({ top: 5 })
    
33.   }
    
34. }
    

复制代码

方式二：

1. @CustomDialog
   
2. struct CustomDialog02 {
   
3.   private inputValue: string
   
4.   changeInputValue: (val: string) => void
   
5.   controller: CustomDialogController
   
6.   build() {
   
7.     Column() {
   
8.       Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
   
9.       TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
   
10.         .onChange((value: string) => {
    
11.           this.changeInputValue(value)
    
12.         })
    
13.     }
    
14.   }
    
15. }
    
16. 
    
17. @Entry
    
18. @Component
    
19. struct DialogDemo02 {
    
20.   @State inputValue: string = 'click me'
    
21.   dialogController: CustomDialogController = new CustomDialogController({
    
22.     builder: CustomDialog02({
    
23.       inputValue: this.inputValue,
    
24.       changeInputValue: (val: string) => {
    
25.         this.inputValue = val
    
26.       }
    
27.     })
    
28.   })
    
29. 
    
30.   build() {
    
31.     Column() {
    
32.       Button(this.inputValue)
    
33.         .onClick(() => {
    
34.           this.dialogController.open()
    
35.         }).backgroundColor(0x317aff)
    
36.     }.width('100%').margin({ top: 5 })
    
37.   }
    
38. }
    

复制代码

方式三：

1. let storage = LocalStorage.GetShared()
   
2. @CustomDialog
   
3. struct CustomDialog03 {
   
4.   @LocalStorageLink('inputVal')  inputValue: string = ''
   
5.   controller: CustomDialogController
   
6.   build() {
   
7.     Column() {
   
8.       Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
   
9.       TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
   
10.         .onChange((value: string) => {
    
11.           this.inputValue = value;
    
12.         })
    
13.     }
    
14.   }
    
15. }
    
16. 
    
17. @Entry(storage)
    
18. @Component
    
19. struct DialogDemo03 {
    
20.   @LocalStorageLink('inputVal') inputValue: string = ''
    
21.   dialogController: CustomDialogController = new CustomDialogController({
    
22.     builder: CustomDialog03()
    
23.   })
    
24. 
    
25.   build() {
    
26.     Column() {
    
27.       Button(this.inputValue)
    
28.         .onClick(() => {
    
29.           this.dialogController.open()
    
30.         }).backgroundColor(0x317aff)
    
31.     }.width('100%').margin({ top: 5 })
    
32.   }
    
33. }
    

复制代码