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

定义类对象

  • @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
  }
}

页面中引入对象

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

自定义弹窗

@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、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/21306,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?