HarmonyOS 鸿蒙Next 如何监测数组中的元素数组发生变化时,ui跟随渲染
HarmonyOS 鸿蒙Next 如何监测数组中的元素数组发生变化时,ui跟随渲染
List({ space: 10, scroller: this.scrollk }) { // ForEach(this.kindOutT, (item: IconKind) => { ForEach(this.currentIndex === 0 ? this.kindOutT : this.kindInT, (item: IconKind) => { ListItem() { Column() { Row() { Row() { if (item.url !== ‘’) { Image(item.url) .width(24) .aspectRatio(1) .fillColor($r(“app.color.font_color”))
} else {
Text(item.kind.substring(0, 1))
.width(30)
.height(30)
.textAlign(TextAlign.Center)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.backgroundColor($r('app.color.button_backGround'))
.fontColor($r('app.color.font_color'))
.borderRadius(15)
}
Text(item.kind)
.TextStyle()
.fontColor($r('app.color.font_color'))
.margin({ left: 16 })
}
.height('100%')
.layoutWeight(1)
.onClick(() => {
this.open(item)
})
SymbolGlyph($r('sys.symbol.more'))
.fontColor([$r("app.color.font_confirm")])
.fontSize($r('app.float.font_size25'))
.onClick(() => {
this.itemKind = new IconKind(item.id, item.url, item.kind, item.inCome, [])
animateTo({
curve: someValue.animationType
}, () => {
if (this.selectedKindSecond === item.kind) {
this.selectedKindSecond = ''
} else {
this.scrollk.scrollToIndex(this.currentIndex === 0 ? this.kindOutT.indexOf(item) : this.kindInT.indexOf(item))
this.selectedKindSecond = item.kind
}
})
})
.opacity(0.6)
.margin({ right: 10 })
SymbolGlyph($r('sys.symbol.trash'))
.fontColor([$r("app.color.font_warn")])
.fontSize($r('app.float.font_size25'))
.onClick(() => {
if ((this.currentIndex === 0 ? this.kindOutT.length : this.kindInT.length) === 1) {
DialogHelper.showToastTip({
orientation: Orientation.HORIZONTAL,
message: "分类列表至少一个分类!",
imageRes: $r('app.media.exclamationmark_triangle'),
duration: 600,
})
} else {
this.delete(item)
}
})
.opacity(0.6)
}
.height(56)
.width('100%')
.padding({ left: 12, right: 12 })
if (this.selectedKindSecond === item.kind) {
Divider().strokeWidth(0.5)
.color($r('app.color.showDow'))
List({ space: 20 }) {
ForEach(item.sKinds, (itemSecond: IconKind) => {
ListItem() {
if (itemSecond.url !== '') {
Image(itemSecond.url)
.width(30)
.padding(3)
.aspectRatio(1)
.fillColor($r("app.color.font_color"))
} else {
Text(itemSecond.sKind.substring(0, 1))
.width(30)
.height(30)
.textAlign(TextAlign.Center)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.backgroundColor($r('app.color.button_backGround'))
.fontColor($r('app.color.font_color'))
.borderRadius(15)
}
Text(itemSecond.sKind)
.fontColor($r('app.color.font_color'))
.fontSize(12).opacity(0.6)
}
.height('100%')
.justifyContent(FlexAlign.Center)
})
.bindContextMenu(this.isShowSecondKind, this.SecondKind, {
placement: Placement.Bottom,
onDisappear: () => {
this.isShowSecondKind = false
},
}
)
.onClick(() => {
this.item = itemSecond
this.isShowSecondKind = true
})
}
.listDirection(Axis.Horizontal)
.height(56)
.alignListItem(ListItemAlign.Start)
.width('100%')
.padding({ left: 12, right: 12 })
}
}
}
}
.borderRadius(24)
.backgroundColor(this.isShowBgImage && this.isOpenBackGroundBlur
? $r('app.color.menu_backGround') : $r('app.color.backGround_second'))
.scale({ x: this.scaleSelect(item), y: this.scaleSelect(item) })
.zIndex(this.dragItem?.kind == item?.kind ? 1 : 0)
.translate(this.dragItem?.kind == item?.kind ? { y: this.offsetY } : { y: 0 })
.gesture(
// 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event?: GestureEvent) => {
if (this.first) {
util_Some.vibratorC()
this.first = false
}
animateTo({ curve: someValue.animationType }, () => {
this.scaleItem = item
})
})
.onActionEnd(() => {
animateTo({ curve: someValue.animationType }, () => {
this.scaleItem = undefined
})
}),
PanGesture({ fingers: 1, direction: null, distance: 0 })
.onActionStart(() => {
this.dragItem = item
this.dragRefOffset = 0
})
.onActionUpdate((event: GestureEvent) => {
this.offsetY = event.offsetY - this.dragRefOffset
this.neighborItem = undefined
const currentArr = this.currentIndex === 0 ? this.kindOutT : this.kindInT
let index = currentArr.indexOf(item)
let curveValue = Curves.initCurve(Curve.Sharp)
let value: number = 0
//根据位移计算相邻项的缩放
if (this.offsetY < 0) {
value = curveValue.interpolate(-this.offsetY / this.ITEM_INTV)
this.neighborItem = currentArr[index - 1]
this.neighborScale = 1 - value / 20;
} else if (this.offsetY > 0) {
value = curveValue.interpolate(this.offsetY / this.ITEM_INTV)
this.neighborItem = currentArr[index + 1]
this.neighborScale = 1 - value / 20;
}
//根据位移交换排序
if (this.offsetY > this.ITEM_INTV / 2) {
util_Some.vibratorC()
animateTo({ curve: someValue.animationType }, () => {
this.offsetY -= this.ITEM_INTV
this.dragRefOffset += this.ITEM_INTV
this.itemMove(index, index + 1)
})
} else if (this.offsetY < -this.ITEM_INTV / 2) {
util_Some.vibratorC()
animateTo({ curve: someValue.animationType }, () => {
this.offsetY += this.ITEM_INTV
this.dragRefOffset -= this.ITEM_INTV
this.itemMove(index, index - 1)
})
}
})
.onActionEnd((event: GestureEvent) => {
if (this.currentIndex === 0) {
this.kindOutT.forEach((item: IconKind, index: number) => {
item.id = index
})
util_Preference.putPreferenceValue(DefaultValue.BILL_OUT, this.kindOutT)
} else {
this.kindInT.forEach((item: IconKind, index: number) => {
item.id = index
})
util_Preference.putPreferenceValue(DefaultValue.BILL_IN, this.kindInT)
}
util_Some.vibratorC()
this.first = true
animateTo({ curve: someValue.animationType }, () => {
this.dragItem = undefined
this.neighborItem = undefined
})
animateTo({
curve: someValue.animationType, delay: 150
}, () => {
this.scaleItem = undefined
})
})
)
.onCancel(() => {
if (this.currentIndex === 0) {
this.kindOutT.forEach((item: IconKind, index: number) => {
item.id = index
})
util_Preference.putPreferenceValue(DefaultValue.BILL_OUT, this.kindOutT)
} else {
this.kindInT.forEach((item: IconKind, index: number) => {
item.id = index
})
util_Preference.putPreferenceValue(DefaultValue.BILL_IN, this.kindInT)
}
animateTo({ curve: someValue.animationType }, () => {
this.dragItem = undefined
this.neighborItem = undefined
})
animateTo({
curve: someValue.animationType, delay: 150
}, () => {
this.scaleItem = undefined
})
})
}, (item: IconKind) => item.kind.toString() + item.id + item.sKinds?.length + item.inCome + item.url ) } .width(‘100%’) .scrollBar(BarState.Off) .chainAnimation(true)
内层数组渲染的List,当内层数组发生元素变化时,ui不跟随刷新,如何解决呀更多关于HarmonyOS 鸿蒙Next 如何监测数组中的元素数组发生变化时,ui跟随渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
可以用 @Observed 和 @ObjectLink 组合监听数组中对象属性的变化，从而刷新UI
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-observed-and-objectlink-V13# 对象数组
更多关于HarmonyOS 鸿蒙Next 如何监测数组中的元素数组发生变化时,ui跟随渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，要监测数组中的元素变化并使UI跟随渲染，你可以利用鸿蒙系统提供的数据绑定和观察者机制。这里提供一个大致的实现思路：
-
数据模型：定义一个数据模型类，该类包含需要监测的数组属性，并为其添加属性变更通知功能。鸿蒙系统支持使用
@Observed注解来标记需要观察的属性。 -
页面绑定：在页面的XML布局文件中，使用数据绑定表达式将UI组件与数据模型中的数组属性绑定。
-
数组变化监测：当数组内容发生变化时（如添加、删除或修改元素），触发数据模型的属性变更通知。这通常通过在数据模型类中实现自定义的数组操作方法（如
add,remove,set等），并在这些方法内部调用属性变更通知函数来完成。 -
UI更新：由于UI组件已经与数据模型中的数组属性绑定，当数组内容变化导致属性变更通知被触发时，UI组件将自动更新以反映最新的数组内容。
请注意，具体的实现细节可能因鸿蒙系统的版本和具体应用场景而有所不同。如果上述方法未能解决你的问题，可能是由于特定的系统限制或配置问题。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，
