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

2024-09-18 14:43:48 浏览数 (3)

定义类对象

  • @Observed应用于类，表示该类中的数据变更被UI页面管理。
  • @ObjectLink应用于被@Observed所装饰类的对象。

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

代码语言：ts复制
@Observed
export class ChangeData {
  name: string
  fat: string
  constructor(name: string, fat: string) {
    this.name = name
    this.fat = fat
  }
}

页面中引入对象

代码语言：ts复制
@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%')
  }
}

自定义弹窗

代码语言：ts复制
@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%')
  }
}

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：