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

  15. @Entry
  16. @Component
  17. struct DialogDemo01 {
  18.   @State inputValue: string = 'click me'
  19.   dialogController: CustomDialogController = new CustomDialogController({
  20.     builder: CustomDialog01({
  21.       inputValue: $inputValue
  22.     })
  23.   })

  24.   build() {
  25.     Column() {
  26.       Button(this.inputValue)
  27.         .onClick(() => {
  28.           this.dialogController.open()
  29.         }).backgroundColor(0x317aff)
  30.     }.width('100%').margin({ top: 5 })
  31.   }
  32. }
复制代码


方式二:
  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. @Entry
  17. @Component
  18. struct DialogDemo02 {
  19.   @State inputValue: string = 'click me'
  20.   dialogController: CustomDialogController = new CustomDialogController({
  21.     builder: CustomDialog02({
  22.       inputValue: this.inputValue,
  23.       changeInputValue: (val: string) => {
  24.         this.inputValue = val
  25.       }
  26.     })
  27.   })

  28.   build() {
  29.     Column() {
  30.       Button(this.inputValue)
  31.         .onClick(() => {
  32.           this.dialogController.open()
  33.         }).backgroundColor(0x317aff)
  34.     }.width('100%').margin({ top: 5 })
  35.   }
  36. }
复制代码


方式三:
  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. @Entry(storage)
  17. @Component
  18. struct DialogDemo03 {
  19.   @LocalStorageLink('inputVal') inputValue: string = ''
  20.   dialogController: CustomDialogController = new CustomDialogController({
  21.     builder: CustomDialog03()
  22.   })

  23.   build() {
  24.     Column() {
  25.       Button(this.inputValue)
  26.         .onClick(() => {
  27.           this.dialogController.open()
  28.         }).backgroundColor(0x317aff)
  29.     }.width('100%').margin({ top: 5 })
  30.   }
  31. }
复制代码





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