HarmonyOS 鸿蒙Next waterflow组件同时删除多个item问题
HarmonyOS 鸿蒙Next waterflow组件同时删除多个item问题
同时删除多个数据后，重新调用setRefreshData设置源数据，这样设置界面不会刷新，难道需要多次调用notifyDataDelete？
public setRefreshData(data: Array<object>): void { this.dataArray = [] this.dataArray = data this.notifyDataReload() }
更多关于HarmonyOS 鸿蒙Next waterflow组件同时删除多个item问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
我这边写了一个demo，模拟你的数据增减需求。看看是否满足要求。 首先WaterFlowDataSource.ets
export class WaterFlowDataSource<T> implements IDataSource {
private dataArray: T[] = [];
private listeners: DataChangeListener[] = [];
constructor(element: T[]) {
this.dataArray = element;
}
//设置数据
public setDataArray(productDataArray: T[]): void {
this.dataArray = productDataArray;
}
//获取数据总数
public totalCount(): number {
return this.dataArray.length;
}
// 获取索引对应的数据
public getData(index: number) {
return this.dataArray[index];
}
// 注册改变数据的控制器
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener);
}
}
// 注销改变数据的控制器
unregisterDataChangeListener(listener: DataChangeListener): void {
let pos = this.listeners.indexOf(listener);
if (pos >= 0) {
this.listeners.splice(pos, 1);
}
}
// 通知控制器数据增加
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdd(index)
})
}
// 通知控制器数据变化
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChange(index)
})
}
// 增加数据
public Add1stItem(data:T): void {
this.dataArray.splice(0, 0, data)
this.notifyDataAdd(0)
}
// 在数据尾部增加一个元素
public AddLastItem(data:T): void {
this.dataArray.splice(this.dataArray.length, 0,data)
this.notifyDataAdd(this.dataArray.length - 1)
}
// 删除第一个元素
public Delete1stItem(): void {
this.dataArray.splice(0, 1)
this.notifyDataDelete(0)
}
// 删除第n个元素
public DeleteItemWithIndex(index:number): void {
this.dataArray.splice(index, 1)
this.notifyDataDelete(index)
}
// 删除一组元素
public DeleteItemWithArr(indexArr:number[]): void {
for(let i=0; i< indexArr.length; i++){
this.dataArray.splice(indexArr[i], 1)
this.notifyDataDelete(indexArr[i])
}
}
接上段
// 删除最后一个元素
public DeleteLastItem(): void {
this.dataArray.splice(-1, 1)
this.notifyDataDelete(this.dataArray.length)
}
// 通知控制器数据删除
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDelete(index)
})
}
// 重新加载数据
public Reload(): void {
this.dataArray.splice(1, 1)
this.dataArray.splice(3, 2)
this.notifyDataReload()
}
// 通知控制器数据重新加载
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}
}
下面是Index.ets
import { WaterFlowDataSource } from '../viewmodel/WaterFlowDataSource';
class Data {
image:string = ''
textStr:string = ''
constructor(textStr: string,image:string) {
this.textStr = textStr;
this.image = image;
}
}
[@Entry](/user/Entry)
[@Component](/user/Component)
export default struct Index {
[@State](/user/State) texDataList:Data[] = [];
selectedDataList:number[] = [];
datasource: WaterFlowDataSource<Data> = new WaterFlowDataSource([])
aboutToAppear(): void {
//模拟网路数据加载
let tempStr :string[] = ['11asadwqe','22asdadasdasd','33qweqw','44asqweqweqweqweqw','55s','66qweqeqeqeqweqweqeq','77','88','99jhkjsdkjhadqweqekjahskjdhahda']
for (let i = 0; i < tempStr.length; i ++) {
let dataTemp = new Data(tempStr[i],'app.media.startIcon')
this.texDataList.push(dataTemp);
}
this.datasource = new WaterFlowDataSource(this.texDataList)
}
//模拟选择两个数据,
setSelectedData(){
this.selectedDataList.push(0)
this.selectedDataList.push(2)
}
deleteSelectedData(data:Array<number>){
this.datasource.DeleteItemWithArr(data)
}
build() {
Column(){
Row(){
Button('增加数据')
.onClick(()=>{
let dataTemp = new Data('增加数据'+this.datasource.totalCount().toString(),'app.media.startIcon')
this.datasource.Add1stItem(dataTemp);
})
Button('减少数据')
.onClick(()=>{
//this.datasource.Delete1stItem()
this.setSelectedData()
this.deleteSelectedData(this.selectedDataList)
})
}
.width('94%')
.height(200)
.justifyContent(FlexAlign.SpaceEvenly)
if (this.texDataList.length > 0) {
WaterFlow({ footer: (): void => this.itemFoot() }) {
LazyForEach(this.datasource, (item: Data) => {
FlowItem() {
FlowItemComponent({ item: item })
.onClick(()=>{
})
}
}, (item: Data) => JSON.stringify(item))
}
.margin({left:10,right:10})
.layoutWeight(1)
接上段
.layoutDirection(FlexDirection.Column)
.columnsTemplate('1fr 1fr')
.columnsGap('8vp')
.rowsGap('8vp')
}
}
.backgroundColor('#f1f1f1')
.width('100%')
.height('100%')
}
[@Builder](/user/Builder)
itemFoot() {
Column() {
Text('已经到底啦')
.fontColor(Color.Gray)
.fontSize('10vp')
.width('100%')
.height('20vp')
.textAlign(TextAlign.Center)
}
}
}
[@Component](/user/Component)
struct FlowItemComponent{
item:Data = new Data('','')
build() {
Column() {
Image($r(this.item?.image))
.width('130vp')
.height('130vp')
.objectFit(ImageFit.Contain)
.margin({
top: '12vp',
bottom: '12vp'
})
Text(this.item.textStr)
.fontColor(Color.Blue)
.fontSize('14vp')
.width('100%')
.textAlign(TextAlign.Center)
}
.borderRadius('8vp')
.backgroundColor(Color.White)
.padding({
left: '12vp',
right: '12vp',
bottom: '12vp'
})
}
}
LazyForEach做如下修改就可以刷新页面，
LazyForEach(this.datasource, (item: object, index?: number) => {
FlowItem() {
this.diyListItemView(item, index, this)
}
.width(""100%"")
.onClick(() => {
if (this.itemClickListener != null) {
this.itemClickListener.OnItemClick(item, this)
}
})
},(item: object) => JSON.stringify(item))
//相当于每一个FlowItem的id，要唯一
更多关于HarmonyOS 鸿蒙Next waterflow组件同时删除多个item问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，Next waterflow组件处理同时删除多个item时，需注意以下几点：
-
批量删除逻辑：确保删除逻辑正确实现。通过遍历待删除item的集合，逐个调用删除接口，或利用组件提供的批量删除接口（如存在）。
-
UI刷新：每次删除item后，需确保UI及时刷新。这通常通过组件的刷新方法或监听器自动处理。
-
数据同步：维护数据模型与UI组件的一致性。删除item后，更新数据源，确保下次渲染时不再显示已删除项。
-
动画效果：若启用动画效果，需处理动画结束后的状态更新，避免动画干扰删除逻辑。
-
异常处理：添加异常处理逻辑，处理删除过程中可能出现的错误，如item未找到、数据同步失败等。
-
线程安全：若在多线程环境下操作，确保数据访问的线程安全，避免并发修改异常。
针对Next waterflow组件的具体实现，请参考官方文档或示例代码，确保删除操作的正确性和效率。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
