HarmonyOS 复杂数据类型变更，UI不刷新，该如何解决？

页面定义一个数据例如下面，通过ForEeah迭代出来的组件，直接操作item数据，列表检测不到数据源发生变换，因此不会刷新ui

List中点击item，item状态发生改变，但是ui没有刷新

目前解决方案：

通过ForEeah Arrary<totalListModel>迭代出来的组件，点击删除后更改数据中etcs中个数，数据源发生变化，UI未刷新。

需要通过position直接操作Array中的元数据，这个时候系统会检测到元数据发生变换，ui会再次刷新

class totalListModel {
  month: string = '';
  etcCount: number = 0;
  etcs: Array<etcBillModel> = [];
}
class etcBillModel {
  month: string = '';
  etcCount: number = 0;
  ......
}

HarmonyOS

Heiang

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

请参考demo:

import { LoadingDialog } from '@kit.ArkUI';

@ObservedV2
export class etcBillModel {
  etcExTime: number = 0;
  etcEnTime: number = 0;
  etcCount?: number = 0;
  @Trace etcMoney?: number = 0;
  etcEntrance: string = '';
  etcExit: string = '';
  id: string = '';
  deviceId?: string = '';
  deviceModel?: string = ""

  constructor(etcExTime: number, etcEnTime: number, etcCount: number, etcMoney: number, etcEntrance: string,
    etcExit: string, id: string, deviceId: string, deviceModel: string) {
    this.etcExTime = etcExTime;
    this.etcEnTime = etcEnTime;
    this.etcCount = etcCount;
    this.etcMoney = etcMoney;
    this.etcEntrance = etcEntrance;
    this.etcExit = etcExit;
    this.id = id;
    this.deviceId = deviceId;
    this.deviceModel = deviceModel;
  }


}

@ObservedV2
class totalListModel {
  month: string = '';
  etcCount: number = 0;
  @Trace etcs: etcBillModel[] = [];

  constructor(month: string, etcCount: number, etcs: etcBillModel[]) {
    this.month = month
    this.etcCount = etcCount;
    this.etcs = etcs;
  }
}



@Entry
@Component
struct PageTwo {
  totalBillList: totalListModel[] = [
    new totalListModel('2001', 1, [ new etcBillModel(1713775684000,0,0,64,"未知收费站","未知收费站","1782330524072812546",'','')
    // {
    // "etcExTime": 1713775684000,
    // "etcMoney": 64,
    // // "etcMoney": 0,
    // "etcEntrance": "未知收费站",
    // "etcExit": "未知收费站",
    // "id": "1782330524072812546",
    // "etcEnTime": 0
    // }
    ]),
    new totalListModel('2000', 2, [ new etcBillModel(1713775684000,0,0,64,"未知收费站","未知收费站","1782330524072812546",'','')
      ,new etcBillModel(1713775684000,0,0,64,"未知收费站","未知收费站","1782330524072812546",'','')
    // {
    // "etcExTime": 1713775684000,
    // "etcMoney": 64,
    // // "etcMoney": 0,
    // "etcEntrance": "未知收费站",
    // "etcExit": "未知收费站",
    // "id": "1782330524072812541",
    // "etcEnTime": 0
    // },
    // {
    // "etcExTime": 1713775684000,
    // "etcMoney": 64,
    // // "etcMoney": 0,
    // "etcEntrance": "未知收费站",
    // "etcExit": "未知收费站",
    // "id": "1782330524072812542",
    // "etcEnTime": 0
    // }
    ]),
  ]
  scroller: Scroller = new Scroller()
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column }) {

        Column() {
          List({ space: 8, initialIndex: 0 }) {
            ForEach(this.totalBillList, (item: totalListModel, index: number) => {
              ListItemGroup({ header: this.itemHead(item) }) {
                ForEach(item.etcs, (el: etcBillModel, idx: number) => {
                  ListItem() {
                    // this.billItem(el, 1)
                    Column() {
                      Row() {
                        Text(el.etcEnTime + ' - ' + el.etcExTime)
                          .fontSize(12)
                          .fontColor('#8d8d8d')
                          .onClick(()=>{
                            this.totalBillList[index].etcs[idx].etcMoney = 50
                            console.log(':::etcMoney',this.totalBillList[index].etcs[idx].etcMoney)
                          })
                        Blank()
                        Text() {
                          Span('￥')
                          Span(el.etcMoney + '')
                        }
                        .onClick(()=>{
                          this.totalBillList[index].etcs[idx].etcMoney = 100
                          console.log(':::etcMoney',this.totalBillList[index].etcs[idx].etcMoney)
                        })
                        .fontSize(12)
                        .fontWeight(600)
                        .fontColor(Color.Black)
                      }
                      .width('100%')
                      .padding({ top: 7, left: 10, bottom: 7 })

                      Text() {
                        ImageSpan($r('app.media.app_icon'))
                          .width(16)
                          .height(16)
                          .verticalAlign(ImageSpanAlignment.CENTER)
                        Span(el.etcEntrance)
                      }
                      .width('100%')
                      .padding({ left: 10 })
                      .margin({ bottom: 10 })

                      Text() {
                        ImageSpan($r('app.media.app_icon'))
                          .width(16)
                          .height(16)
                          .verticalAlign(ImageSpanAlignment.CENTER)
                        Span(el.etcExit)
                      }
                      .width('100%')
                      .padding({ left: 10, bottom: 10 })

                      // .border({
                      // width: { bottom: '1vp' },
                      // style: {
                      // top: BorderStyle.Solid,
                      // },
                      // color: {
                      // top: '#eeeeee'
                      // }
                      // })
                    }
                    .width('100%')
                    .padding({ right: 15 })
                    .backgroundColor(Color.White)
                  }
                  .width('100%')
                  .padding({ left: 10 })
                  .swipeAction({
                    end: {
                      builder: () => {
                        this.itemEnd(el.id, index, idx)
                      },
                    },
                    edgeEffect: SwipeEdgeEffect.None
                  })
                }, (index: number) => index.toString()+Date.now())
              }
            }, (item: totalListModel) => item.month+Date.now())
          }
          .width('100%')
          .divider({ strokeWidth: 0 })
          .sticky(StickyStyle.Header)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .visibility(this.totalBillList.length > 0 ? Visibility.Visible : Visibility.None)

        ///无数据
        Column() {
          Image($r('app.media.app_icon'))
            .width(83)
            .height(90)
          Text('暂时没有ETC消费记录呦')
            .fontSize(16)
            .fontColor('#AEAEAE')
        }
        .width('100%')
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
        .visibility(this.totalBillList.length > 0 ? Visibility.None : Visibility.Visible)
      }
      .width('100%')
      .layoutWeight(1)
      .padding({ bottom: 10 })
    }
    .width('100%')
    .height('100%')
  }

  ///头部日期选择
  @Builder
  itemHead(item: totalListModel) {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        Text() {
          Span('总消费')
          Span('￥' + item.etcCount)
        }
        .fontColor('#C0C0C0')
        .fontSize(14)

        Text('账单仅供参考，以实际ETC账户扣款为准')
          .fontSize(12)
          .fontColor('#C0C0C0')
          .margin({ top: 4 })
      }
      .width('100%')
      .alignItems(HorizontalAlign.End)

      Row() {
        Text(item.month)
          .fontSize(15)
        Image($r('app.media.app_icon'))
          .width(10)
          .height(5.5)
          .margin({ left: 4 })
      }
      .justifyContent(FlexAlign.Start)
      .onClick(() => {
      })

    }
    .width('100%')
    .backgroundColor('#f8f8f8')
    .padding({ top: 10, bottom: 10, left: 25, right: 20 })
  }

  @Builder
  billItem(item: etcBillModel) {
    Column() {
      Row() {
        Text(item.etcEnTime + ' - ' + item.etcExTime)
          .fontSize(12)
          .fontColor('#8d8d8d')
        Blank()
        Text() {
          Span('￥')
          Span(item.etcMoney + '')
        }
        .fontSize(12)
        .fontWeight(600)
        .fontColor(Color.Black)
      }
      .width('100%')
      .padding({ top: 7, left: 10, bottom: 7 })

      Text() {
        ImageSpan($r('app.media.app_icon'))
          .width(16)
          .height(16)
          .verticalAlign(ImageSpanAlignment.CENTER)
        Span(item.etcEntrance)
      }
      .width('100%')
      .padding({ left: 10 })
      .margin({ bottom: 10 })

      Text() {
        ImageSpan($r('app.media.app_icon'))
          .width(16)
          .height(16)
          .verticalAlign(ImageSpanAlignment.CENTER)
        Span(item.etcExit)
      }
      .width('100%')
      .padding({ left: 10, bottom: 10 })

      // .border({
      // width: { bottom: '1vp' },
      // style: {
      // top: BorderStyle.Solid,
      // },
      // color: {
      // top: '#eeeeee'
      // }
      // })
    }
    .width('100%')
    .padding({ right: 15 })
    .backgroundColor(Color.White)
  }

  ///删除
  @Builder
  itemEnd(id: string, idx1: number, idx2: number) {
    Row() {
      Text('删除')
        .fontColor(Color.White)
    }
    .width(60)
    .height("100%")
    .backgroundColor(Color.Red)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.delItem(id, idx1, idx2)
    })
  }

  private delItem(id: string, idx1: number, idx2: number) {
    let loading = new CustomDialogController({
      builder: LoadingDialog({ content: '删除中...', }),
      autoCancel: false,
      alignment: DialogAlignment.Center
    });
    loading.open();
    this.totalBillList[idx1].etcs.splice(idx2, 1)
    this.totalBillList = JSON.parse(JSON.stringify(this.totalBillList))
  }
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 复杂数据类型变更，UI不刷新，该如何解决？

订阅鸿蒙技术特刊，精选内容抢先看