如果在一个组件中有一个模型数组,把模型数组传递给子组件,如何做到在父组件中修改模型数组中一个元素

如果在一个组件中有一个模型数组,把模型数组传递给子组件,如何做到在父组件中修改模型数组中一个元素,去刷新ui


HarmonyOS
2024-05-07 21:08:49
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

@State只能监听到一层,对于嵌套属性值得改变无法监听,所以页面无法更新,ArkUI中提供了@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink-0000001774279618

参考以下demo:

@Observed 
class Model1 { 
text: string; 
color: ResourceColor 
 
constructor(text: string, color: ResourceColor) { 
this.text = text 
this.color = color 
} 
} 
 
@Component 
struct SubView { 
// @Link models: Model1[] 
@ObjectLink model: Model1; 
build() { 
Row() { 
Column() { 
Text(this.model.text) 
.backgroundColor(this.model.color) 
} 
} 
} 
} 
 
@Entry 
@Component 
struct Test1 { 
@State models: Model1[] = [new Model1(“hello world”, Color.Red)] 
 
build() { 
Row() { 
Column() { 
ForEach(this.models, (item: Model1, index: number) => { 
SubView({ model: item }) 
}, (item: Model1, index: number) => { 
return index.toString() 
}) 
Button(‘Test view: clicked here’) 
.onClick(() => { 
// 下面两行都无法刷新ui 
this.models[0].color = Color.Blue 
// this.models = [new Model1(“hello world”, Color.Blue)] 
}) 
 
}.width(‘100%’) 
}.height(‘100%’) 
} 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.

并不是状态变量的所有更改都会引起UI的刷新,只有可以被框架观察到的修改才会引起UI刷新。该链接介绍了什么样的修改才能被观察到,以及观察到变化后,框架的是怎么引起UI刷新的,即框架的行为表现是什么。https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-0000001774279614#ZH-CN_TOPIC_0000001774279614__观察变化和行为表现"

分享
微博
QQ
微信
回复
2024-05-08 15:20:31


相关问题
如何判断一个数组不为空?
1196浏览 • 1回复 待解决
Stage模型如何开发一个服务卡片
3078浏览 • 1回复 待解决
HarmonyOS 从数组随机获取一个数值
703浏览 • 1回复 待解决
Napi的方法如何返回一个数组类型?
1330浏览 • 1回复 待解决
如何判断一个对象是否在对象数组
3348浏览 • 1回复 待解决
如何实现一个折叠组件
1892浏览 • 1回复 待解决