HarmonyOS 鸿蒙Next tabs多层嵌套界面渲染问题

@Observed
export class Class1 {
public id: string
public items: Class2[]

constructor(id: string, items: Class2[] = []) {
this.id = id
this.items = items
}
}
@Observed
export class Class2 {
public id: string
constructor(id: string) {
this.id = id
}
}
@Entry
@Component
struct TabsComponent {
@State selectIndex: number = 0;
@State tag: number = 0;
@State class1s: Class1[] =
[new Class1(“1”, [new Class2(“1-1”), new Class2(“1-2”), new Class2(“1-3”), new Class2(“1-4”)]),
new Class1(“2”, [new Class2(“1-1”), new Class2(“1-2”), new Class2(“1-3”), new Class2(“1-4”)]),
new Class1(“3”, [new Class2(“1-1”), new Class2(“1-2”), new Class2(“1-3”), new Class2(“1-4”)])];
@Builder
TabBarBuilder(tab: string, index: number) {
Column() {
Text(tab).fontSize(14).fontColor(index == this.selectIndex ? ‘#F40000’ : ‘#333333’)
Image($r(‘app.media.icon_select_tab’))
.width(16)
.height(5)
.margin({ top: 3 })
.visibility(index == this.selectIndex ? Visibility.Visible : Visibility.Hidden)
}.padding({ right: 6, left: 6 })
.margin({ right: 6, left: 6 })
}
build() {
Scroll() {
Column() {
Column() {
Stack({ alignContent: Alignment.Bottom }) {
//顶部广告图
Swiper() {
Text(‘顶部广告图’)
}
.height(‘100%’)
.width(‘100%’)
.loop(true)
.autoPlay(true)
.interval(3000)
.indicator(false)
.backgroundColor(Color.Brown);
        <span class="hljs-comment"><span class="hljs-comment">//用户登录信息</span></span>
        Stack() {
          Text(<span class="hljs-string"><span class="hljs-string">'用户登录信息'</span></span>)
        }.margin({ right: <span class="hljs-number"><span class="hljs-number">12</span></span>, left: <span class="hljs-number"><span class="hljs-number">12</span></span> });
      }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-number"><span class="hljs-number">367</span></span>).backgroundColor(Color.Pink);

      <span class="hljs-comment"><span class="hljs-comment">//金刚图</span></span>
      Grid() {
        GridItem() {
          Column() {
            Text(<span class="hljs-string"><span class="hljs-string">'金刚图'</span></span>)
              .fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>)
              .fontColor(<span class="hljs-string"><span class="hljs-string">'#333333'</span></span>)
              .margin({ top: <span class="hljs-number"><span class="hljs-number">8</span></span> })
          }
        }.height(<span class="hljs-number"><span class="hljs-number">85</span></span>).width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
      }
      .columnsTemplate((<span class="hljs-string"><span class="hljs-string">'1fr 1fr 1fr 1fr 1fr'</span></span>) as string)
      .padding({
        right: <span class="hljs-number"><span class="hljs-number">12</span></span>,
        left: <span class="hljs-number"><span class="hljs-number">12</span></span>,
        top: <span class="hljs-number"><span class="hljs-number">16</span></span>,
        bottom: <span class="hljs-number"><span class="hljs-number">16</span></span>
      })
      .rowsGap(<span class="hljs-number"><span class="hljs-number">12</span></span>)
      .columnsGap(<span class="hljs-number"><span class="hljs-number">12</span></span>)
      .backgroundColor(Color.Red);

      <span class="hljs-comment"><span class="hljs-comment">//轮播图</span></span>
      Swiper() {
      }
      .height(<span class="hljs-number"><span class="hljs-number">112</span></span>)
      .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
      .loop(<span class="hljs-literal"><span class="hljs-literal">true</span></span>)
      .autoPlay(<span class="hljs-literal"><span class="hljs-literal">true</span></span>)
      .interval(<span class="hljs-number"><span class="hljs-number">2000</span></span>)
      .indicator(
        Indicator.dot()
          .top(<span class="hljs-number"><span class="hljs-number">70</span></span>)
          .itemWidth(<span class="hljs-number"><span class="hljs-number">6</span></span>)
          .itemHeight(<span class="hljs-number"><span class="hljs-number">6</span></span>)
          .selectedItemWidth(<span class="hljs-number"><span class="hljs-number">10</span></span>)
          .selectedItemHeight(<span class="hljs-number"><span class="hljs-number">6</span></span>)
          .color(Color.White)
          .selectedColor(<span class="hljs-string"><span class="hljs-string">'#F40000'</span></span>)
      )
      .padding({
        right: <span class="hljs-number"><span class="hljs-number">12</span></span>,
        left: <span class="hljs-number"><span class="hljs-number">12</span></span>,
        bottom: <span class="hljs-number"><span class="hljs-number">16</span></span>
      })
      .backgroundColor(Color.Green);

      <span class="hljs-comment"><span class="hljs-comment">//宫格图</span></span>
      Grid() {
      }
      .columnsTemplate((<span class="hljs-string"><span class="hljs-string">'1fr 1fr'</span></span>) as string)
      .backgroundColor(Color.Orange)
      .padding({
        right: <span class="hljs-number"><span class="hljs-number">12</span></span>,
        left: <span class="hljs-number"><span class="hljs-number">12</span></span>
      })
      .rowsGap(<span class="hljs-number"><span class="hljs-number">12</span></span>)
      .columnsGap(<span class="hljs-number"><span class="hljs-number">12</span></span>)
      .backgroundColor(Color.Yellow);

      Text(<span class="hljs-string"><span class="hljs-string">'增加listItem'</span></span>).height(<span class="hljs-number"><span class="hljs-number">40</span></span>).backgroundColor(Color.Transparent)
        .onClick(() =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.class1s.forEach((class1: Class1) =&gt; {
            class1.items.push(<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> Class2(class1.items.length.toString()))
          })
        });

      Text(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tag + <span class="hljs-string"><span class="hljs-string">'点击展示class1s '</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.class1s))
        .backgroundColor(Color.Transparent)
        .margin(<span class="hljs-number"><span class="hljs-number">10</span></span>)
        .onClick(() =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tag += <span class="hljs-number"><span class="hljs-number">1</span></span>;
        });
    }

    <span class="hljs-comment"><span class="hljs-comment">//券分类</span></span>
    Tabs({ barPosition: BarPosition.Start }) {
      ForEach(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.class1s, (class1: Class1, index: number) =&gt; {
        iTabContent({ selectIndex: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectIndex, index: index, class1: class1 });
      })
    }
    .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#F7F7F7'</span></span>)
    .vertical(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
    .height(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
    .scrollable(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
    .barMode(BarMode.Scrollable)
    .onChange((index: number) =&gt; {
      <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectIndex = index;
    })
  }.width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
}
.edgeEffect(EdgeEffect.Spring)
.friction(<span class="hljs-number"><span class="hljs-number">0.6</span></span>)
.scrollBar(BarState.Off)
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>);
};
}
@Component
struct iTabContent {
@Prop selectIndex: number;
@Prop index: number;
@ObjectLink class1: Class1;
@Builder
TabBarBuilder(tab: string, index: number) {
Column() {
Text(tab).fontSize(14).fontColor(index == this.selectIndex ? ‘#F40000’ : ‘#333333’)
}.padding({ right: 6, left: 6 })
.margin({ right: 6, left: 6 })
}
build() {
TabContent() {
List() {
ForEach(this.class1.items, (item: Class2, index: number) => {
iListItem({ item: item, index: index });
}, (item: Class2, index) => item.id + index)
}.width(‘100%’).height(‘100%’)
.edgeEffect(EdgeEffect.Spring)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}.tabBar(this.TabBarBuilder(this.class1.id, this.index))
}
}
@Component
struct iListItem {
@Prop index: number;
@ObjectLink item: Class2;
build() {
ListItem() {
Text(JSON.stringify(this.item) + this.index);
}
.borderRadius(12)
.margin(12)
.backgroundColor(Color.White)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

使用集合嵌套集合的数据结构，改变第二层集合的长度后，界面没有渲染新数据，帮忙看下是哪里的问题