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

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

HarmonyOS
2024-05-26 11:24:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
depengli

1. 定义类对象

@Observed应用于类,表示该类中的数据变更被UI页面管理。

@ObjectLink应用于被@Observed所装饰类的对象。

当开发者想针对父组件中某个数据对象的部分信息进行同步时,使用@Link就不能满足要求。如果这些部分信息是一个类对象,就可以使用@ObjectLink配合@Observed来实现。

@Observed 
export class ChangeData { 
  name: string 
  fat: string 
  constructor(name: string, fat: string) { 
    this.name = name 
    this.fat = fat 
  } 
}

2. 页面中引入对象

@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%') 
  } 
}

3. 自定义弹窗。

@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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 11:08:25
相关问题
自定义弹窗中的变量如何传递给页面
1092浏览 • 1回复 待解决
自定义弹窗自定义转场动画
436浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
1027浏览 • 1回复 待解决
自定义弹窗使用相关问题
403浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
498浏览 • 1回复 待解决
如何设置自定义弹窗位置
790浏览 • 1回复 待解决
ArkTS简单类型变量双向数据绑定
429浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
1727浏览 • 1回复 待解决
如何去除自定义弹窗的白色背景
845浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
926浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
819浏览 • 1回复 待解决
ArkTS是否支持自定义装饰器?
724浏览 • 1回复 待解决
ArkTS如何自定义资源文件
847浏览 • 1回复 待解决
如何理解自定义弹窗中的gridCount参数
917浏览 • 1回复 待解决
加载页面的时候如何自定义header
383浏览 • 1回复 待解决