HarmonyOS 鸿蒙Next复杂数据类型变更，UI不刷新，该如何解决？
HarmonyOS 鸿蒙Next复杂数据类型变更，UI不刷新，该如何解决？ 页面定义一个数据例如下面，通过ForEeah迭代出来的组件，直接操作item数据，列表检测不到数据源发生变换，因此不会刷新ui
List中点击item，item状态发生改变，但是ui没有刷新
解决方案：
通过ForEeah Array<totalListModel>迭代出来的组件，点击删除后更改数据中etcs中个数，数据源发生变化，UI未刷新。
需要通过position直接操作Array中的元数据，这个时候系统会检测到元数据发生变换，ui会再次刷新
class totalListModel {
month: string = '';
etcCount: number = 0;
etcs: Array<etcBillModel> = [];
}
class etcBillModel {
month: string = '';
etcCount: number = 0;
......
}
更多关于HarmonyOS 鸿蒙Next复杂数据类型变更，UI不刷新，该如何解决？的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
请参考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 etcMoney: etcBillModel[] = [];
constructor(month: string, etcCount: number, etcMoney: etcBillModel[]) {
this.month = month
this.etcCount = etcCount;
this.etcMoney = etcMoney;
}
}
@Entry
@Component
struct PageTwo {
totalBillList: totalListModel[] = [
new totalListModel('2001', 1,
[new etcBillModel(1713775684000, 0, 0, 64, "未知收费站", "未知收费站", "1782330524072812546", '', '')
]),
new totalListModel('2000', 2,
[new etcBillModel(1713775684000, 0, 0, 64, "未知收费站", "未知收费站", "1782330524072812546", '', '')
, new etcBillModel(1713775684000, 0, 0, 64, "未知收费站", "未知收费站", "1782330524072812546", '', '')
]),
]
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() {
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 })
}
.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 })
}
.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))
}
}
更多关于HarmonyOS 鸿蒙Next复杂数据类型变更，UI不刷新，该如何解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS（鸿蒙）开发中，遇到复杂数据类型变更而UI不刷新的问题，通常是由于数据绑定机制未能正确响应数据变化。以下是一些可能的解决方法：
-
确保数据可观察性：鸿蒙系统提供了数据绑定机制，确保你的复杂数据类型实现了可观察接口。如果数据类型是自定义的，需要实现相应的观察者模式或数据变更通知机制，以便当数据变化时能够通知UI进行更新。
-
使用正确的绑定方式：在XML布局文件中，确保使用了正确的数据绑定表达式来绑定复杂数据类型。同时，检查代码中是否有对绑定对象进行正确的设置和更新。
-
检查数据变更触发：在代码中修改复杂数据类型时，确保触发了数据绑定的更新机制。例如，如果是集合类型，使用集合提供的方法来添加、删除或修改元素，而不是直接操作集合的内部状态。
-
UI线程更新：确保UI的更新操作是在UI线程（主线程）上进行的。鸿蒙系统对线程有严格的管理，非UI线程上的UI操作可能不会生效。
如果上述方法均未能解决问题，可能是数据绑定机制的具体实现存在问题，或者存在其他未考虑到的因素。此时，建议深入检查数据绑定的具体实现，或者考虑是否有其他逻辑错误导致UI未刷新。
如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html
