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

Question

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

Answer 1

可以使用以下三种方式来实现：

1.使用组件的状态变量传递。

@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 }) 
  } 
}

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

@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 }) 
  } 
}

3.使用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 = ''; 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialog03() 
  }); 
 
  build() { 
    Column() { 
      Button(this.inputValue) 
        .onClick(() => { 
          this.dialogController.open(); 
        }).backgroundColor(0x317aff) 
    }.width('100%').margin({ top: 5 }) 
  } 
}