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

HarmonyOS

lhlrj

2024-01-19 15:36:30

浏览

回答 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 }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

方式二：

@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 }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

方式三：

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 }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

2024-01-19 21:17:41

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

发布

51CTO

51CTO博客

51CTO学堂

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

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