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

HarmonyOS

lhlrj

2024-01-19 15:36:30

浏览

回答 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 }) 
  } 
}

2024-01-19 21:17:41

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看