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%')
}
}
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……

开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……

基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

更多推荐


所有评论(0)