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

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

HarmonyOS
2024-01-19 15:36:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
commonli
  • 方式一:使用组件的状态变量传递。
  • 方式二:在初始化弹窗时,传递一个方法给自定义弹窗,在自定义弹窗中触发该方法,弹窗中变量作为方法的参数。
  • 方式三:使用AppStorage或LocalStorage方式管理页面状态,实现自定义弹窗和页面之间状态的共享。

代码示例

  • 方式一:
@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 }) 
  } 
}
  • 方式二:
@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 }) 
  } 
}
  • 方式三:
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 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-01-19 21:17:41
相关问题
如何自定义弹窗再次弹窗
1078浏览 • 1回复 待解决
自定义弹窗自定义转场动画
446浏览 • 1回复 待解决
如何理解自定义弹窗gridCount参数
974浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
526浏览 • 1回复 待解决
如何设置自定义弹窗位置
832浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4697浏览 • 2回复 待解决
如何去除自定义弹窗白色背景
892浏览 • 1回复 待解决
自定义弹窗使用相关问题
419浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
967浏览 • 1回复 待解决
加载页面的时候如何自定义header
395浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
861浏览 • 1回复 待解决
自定义组件如何添加图片?
1273浏览 • 1回复 待解决
鸿蒙如何自定义字体文件
17974浏览 • 1回复 待解决