OpenHarmony开发者论坛

标题: 自定义弹窗中的变量如何传递给页面 [打印本页]
作者: Summer    时间: 2023-9-6 17:13
标题: 自定义弹窗中的变量如何传递给页面

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

【运行环境】
硬件：rk3568；  ROM: 3.2 Beta5 ；  API 9



作者: hyacinth养花人    时间: 2023-9-7 09:15

有以下三种解决措施：
●方式一：使用组件的状态变量传递。
●方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。
●方式三：使用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. }

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

  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. }

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

  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. }

  17. @Entry(storage)
  18. @Component
  19. struct DialogDemo03 {
  20.   @LocalStorageLink('inputVal') inputValue: string = ''
  21.   dialogController: CustomDialogController = new CustomDialogController({
  22.     builder: CustomDialog03()
  23.   })

  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. }
复制代码




欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5