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

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

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
相关问题
如何理解自定义弹窗gridCount参数
165浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4102浏览 • 2回复 待解决
如何设置自定义弹窗位置
111浏览 • 1回复 待解决
如何去除自定义弹窗白色背景
142浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
146浏览 • 1回复 待解决
自定义组件如何添加图片?
625浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
154浏览 • 1回复 待解决
鸿蒙如何自定义字体文件
16755浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
679浏览 • 1回复 待解决
华为手机是否支持自定义锁屏页面
2195浏览 • 1回复 待解决
如何自定义Component 属性
12728浏览 • 3回复 待解决
ArkTS如何自定义资源文件
129浏览 • 1回复 待解决
如何在js文件引入自定义js文件
5590浏览 • 1回复 待解决
自定义组件如何导出、引入?
211浏览 • 1回复 待解决
如何实现H5自定义事件
137浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
206浏览 • 1回复 待解决
自定义组件嵌套子组件
7144浏览 • 3回复 待解决
Grid组件scrollBar是否支持自定义
122浏览 • 1回复 待解决
如何自定义拼接设置UserAgent参数
177浏览 • 1回复 待解决