HarmonyOS 自定义组件,数据更新时,界面无法重新渲染

@Component
export struct CardView {
  @State title: string | undefined = undefined
  @State moreText: string = '更多'

  @Builder
  tempBuilder() {
  };

  @BuilderParam contentBuilder: () => void = this.tempBuilder

  build() {
    this.contentBuilder()
  }
}

//组件被调用

@Component
export struct NoticeCardView {
  @State noticeList: Notice[] = []

  aboutToAppear(): void {
    new NoticeRepository().getNoticeList().then((result) => {
      this.noticeList = result
    })
  }

  @Builder
  ContentBuilder() {
    ForEach(this.noticeList, (notice: Notice) => {
      Row() {
        Image($r('app.media.wb_ic_notice_tip')).height(11).width(9)
        Text(notice.title)
          .margin({ left: 11 })
          .fontColor($r('app.color.cm_text_primary'))
          .fontSize('14fp')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }.padding(8)
    })
  }

  build() {
    CardView({
      title: '',
      contentBuilder: this.ContentBuilder
    })
  }
}

自定义组件noticeList更新时,无法触发界面更新,无法渲染出列表展示

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考以下代码:

@Component
struct CardView  {
  @Prop header: string = '';
  @Builder tempBuilder(){}

  @BuilderParam contentBuilder: () => void = this.tempBuilder
  build() {
    Column() {
      this.contentBuilder()
    }
  }
}
@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';
  @State list: string[] = []
  aboutToAppear(): void {
    this.list.push("1");
    this.list.push("2");
    this.list.push("3");
    console.log('打印一下',this.list)

  }
  build() {
    Column() {
      Text(this.text)
      CardView ({ header: this.text }) {
        Column() {
          this.ContentBuilder('testA', 'testB')
        }.backgroundColor(Color.Yellow)
      }
    }

  }
  @Builder  ContentBuilder(label1: string, label2: string) {
    Column() {
      Text('test')
      ForEach(this.list, (text: string) => {
        Text(text)
      })
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 自定义组件问题
388浏览 • 1回复 待解决
自定义界面扫码预览画面出现拉伸
1849浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人