HarmonyOS 关于List组件使用ForEach渲染刷新的问题

1、加载列表数据,所有子组件都是收起状态。

2、点击展开第一个子组件。

3、点击刷新列表数据,期待结果为所有子组件都为收起状态。

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

示例参考:

@Entry
@Component
struct Index {
  @State dataSource: ListItemObject[] = [];

  aboutToAppear(): void {
    this.refreshData();
  }

  private refreshData() {
    this.dataSource.length = 0;
    // console.log(JSON.stringify(this.dataSource))
    // this.dataSource = []
    for (let i = 1; i < 7; i++) {
      let obj = new ListItemObject();
      obj.id = i;
      obj.uuid = Math.random().toString();
      obj.isExpand = false
      this.dataSource.push(obj);
    }
    console.log(JSON.stringify(this.dataSource))
  }

  build() {
    Column({ space: 20 }) {
      Button('点击刷新')
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor(Color.Blue)
        .type(ButtonType.Normal)
        .width('100%')
        .height(80)
        .onClick(() => {
          this.refreshData();
        })


      List({ space: 10 }) {
        ForEach(this.dataSource, (item: ListItemObject) => {
          ListItem() {
            ListItemView({
              obj: item
            })
          }
        }, (item: ListItemObject) => {
          return item.uuid.toString()
        })
      }
      .width('100%')
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Grey)
  }
}

@Component
struct ListItemView {
  @ObjectLink obj: ListItemObject;

  build() {
    Column({ space: 10 }) {
      Text(`${this.obj.id}.标题`)
        .fontSize(16)
        .fontColor('#000000')
        .padding({
          top: 20,
          bottom: 20,
        })

      if (this.obj.isExpand) {
        Text('内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容')
          .fontSize(14)
          .fontColor('#999999')
      }
    }
    .width('100%')
    .borderRadius(10)
    .backgroundColor(Color.White)
    .padding(15)
    .onClick(() => {
      this.obj.isExpand = !this.obj.isExpand;
    })
  }
}

@Observed
class ListItemObject {
  uuid: string = ""
  id: number = 0;
  isExpand: boolean = false;
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS ForEach列表刷新问题
79浏览 • 1回复 待解决
HarmonyOS ForEach创建视图刷新问题
39浏览 • 1回复 待解决
HarmonyOS List组件动态刷新数据问题
1049浏览 • 1回复 待解决
HarmonyOS ForEach局部刷新
538浏览 • 1回复 待解决
修改ForEach使用数据对象,UI不刷新
1875浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
815浏览 • 1回复 待解决
HarmonyOS Swiper+ForEach使用问题
404浏览 • 1回复 待解决
HarmonyOS Web组件List嵌套使用问题
287浏览 • 1回复 待解决
ForEach循环渲染过程是什么样
858浏览 • 1回复 待解决
HarmonyOSList组件是否支持局部刷新
637浏览 • 1回复 待解决