ArkTS页面自定义弹窗时变量双向同步功能

@Observed 
export class ChangeData { 
  name: string 
  fat: string 
  constructor(name: string, fat: string) { 
    this.name = name 
    this.fat = fat 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

@Entry 
@Component 
struct Index { 
  @State foodItem: ChangeData = { name: "Tomato", age: "12" } 
  //定义弹出框 
  private addDialogController: CustomDialogController = new CustomDialogController({ 
    builder: AddDialog({ foodItem: this.foodItem }), 
    autoCancel: true 
  }) 
 
  build() { 
    Column() { 
      Column() { 
        Button() { 
          Text('弹窗') 
            .fontSize(20) 
            .fontWeight(FontWeight.Bold) 
        } 
        .type(ButtonType.Capsule) 
        .margin({ 
          top: 20 
        }) 
        .backgroundColor('#0D9FFB') 
        .width('35%') 
        .height('5%') 
        .onClick(() => { 
          //显示弹出框          
          this.addDialogController.open() 
        }) 
 
        Row() { 
          Text('name:') 
            .fontSize(20) 
            .fontWeight(FontWeight.Bold) 
            .margin({ right: 10 }) 
          Text(this.foodItem.name) 
            .fontSize(20) 
        }.width('100%') 
        .margin({ 
          top: 20 
        }) 
        .padding({ right: 20, left: 20 }) 
 
        Row() { 
          Text('fat:') 
            .fontSize(20) 
            .fontWeight(FontWeight.Bold) 
            .margin({ right: 10 }) 
          Text(this.foodItem.age) 
            .fontSize(20) 
        }.width('100%') 
        .margin({ 
          top: 20 
        }) 
        .padding({ right: 20, left: 20 }) 
      } 
      .width('100%') 
    }.alignItems(HorizontalAlign.Center) 
    .height('100%') 
  } 
}
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.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

@CustomDialog 
export struct AddDialog { 
  //@ObjectLink与@Observed对象进行关联 
  @ObjectLink foodItem: ChangeData; 
  private controller: CustomDialogController 
 
  build() { 
    Column() { 
      Row() { 
        Text('name') 
          .width(65) 
          .fontSize(20) 
          .fontColor(Color.Black) 
          .fontWeight(FontWeight.Medium) 
        TextInput({ placeholder: 'input name' }) 
          .layoutWeight(1) 
          .type(InputType.Normal) 
          .placeholderColor(Color.Gray) 
          .fontSize(19) 
          .maxLength(20) 
          .margin({ left: 10 }) 
          .onChange((value: string) => { 
            this.foodItem.name = value 
          }) 
      }.margin({ top: '3%' }) 
 
      Row() { 
        Text('age') 
          .width(65) 
          .fontSize(20) 
          .fontColor(Color.Black) 
          .fontWeight(FontWeight.Medium) 
        TextInput({ placeholder: 'input age' }) 
          .layoutWeight(1) 
          .type(InputType.Normal) 
          .placeholderColor(Color.Gray) 
          .fontSize(19) 
          .maxLength(20) 
          .margin({ left: 10 }) 
          .onChange((value: string) => { 
            this.foodItem.age = value 
          }) 
      }.margin({ top: '3%' }) 
 
      Row() { 
        Button() { 
          Text('yes') 
            .fontColor(Color.Blue) 
            .fontSize(17) 
        } 
        .layoutWeight(7) 
        .backgroundColor(Color.White) 
        .margin(5) 
        .onClick(() => { 
          this.controller.close() 
        }) 
 
        Text() 
          .width(1).height(35) 
          .backgroundColor('#8F8F8F') 
        Button() { 
          Text('no') 
            .fontColor(Color.Red) 
            .fontSize(17) 
        } 
        .layoutWeight(7) 
        .backgroundColor(Color.White) 
        .margin(5) 
        .onClick(() => { 
          this.controller.close() 
        }) 
      } 
      .width('100%') 
      .margin({ top: '3%' }) 
    } 
    .padding('3%') 
  } 
}
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.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.