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;
  ......
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

HarmonyOS

Heiang

2025-01-09 14:41:01

浏览

回答 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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.

2025-01-09 18:19:48

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

发布

51CTO

51CTO博客

51CTO学堂

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

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