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