利用@Observed实现对象数组在父子组件间互相同步

 responseData:他是一个数据,数组成员是对象,所以称为对象数组。

 [
    {
        "patternName": "蔬菜",
        "todayIntake": "43",
        "childNodes": [
            {
                "foodSubgroupName": "深绿色蔬菜",
                "conversionRecommendedAmounts": "592",
                "conversionUnit": "毫升",
                "eatingCycle": "周"
            },
            {
                "foodSubgroupName": "其他蔬菜",
                "conversionRecommendedAmounts": "1301",
                "conversionUnit": "毫升",
                "eatingCycle": "周"
            }
        ]
    },
    {
        "patternName": "谷物",
        "todayIntake": "77",
        "childNodes": [
            {
                "foodSubgroupName": "精制谷物",
                "conversionRecommendedAmounts": "128",
                "conversionUnit": "克",
                "eatingCycle": "天"
            }
        ]
    }
]

responseData数据和组件布局映射关系如下:

绿色方框是子组件,要实现效果:子组件滑动条数据变化时,其父组件的responseData数据也跟着同步变化,(或者父组件滑轨为零时,子食物组的所有checked设置为false,并重新渲染组件)则实现如下:

responseData数据结构如下:

@State responseData: FoodRecommendedAmountsClassSecond[] = [];
@Observed
export class FoodRecommendedAmountsClassSecond {
  patternName: string= '';
  todayIntake: string= '';//本日摄入
  childNodes: FoodRecommendedAmountsInter[]= []; 

用@Observed装饰的类FoodRecommendedAmountsClassSecond

@Observed和@ObjectLink类类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。

父组件传入子组件:

List() {
  ForEach(this.responseData,(item:FoodRecommendedAmountsClassSecond)=>{
    // 蔬菜组
    ListItem() {
      List(){
        // 蔬菜组标题、目标达成进度
        ListItem() {
          FoodGroupComponents({info:item});
        }

子组件接收如下:

@Component
export default struct FoodGroupComponents {
  @ObjectLink info: FoodRecommendedAmountsClassSecond;
...

build() {
  Column() {
    // 蔬菜组标题
    Row() {
      Text(this.info.patternName)
...

子组件中@ObjectLink装饰器装饰的状态变量(@ObjectLink info)用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。