list里面显示富文本,如果在列表里面使用RichText 会导致卡顿,如果使用RichEditor 则不能自适应

如果在列表里面使用RichText 会导致卡顿,如果使用RichEditor 则不能自适应。


HarmonyOS
2024-10-09 09:55:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

list列表中使用RichText卡顿,优化

1、使用LazyForEach

2、使用组件复用

参考demo:

// RichTextDemoPage.ets  
import { CommonDataSource } from '../viewmodel/CommonDataSource';  
  
interface TextClazz {  
  type: number,  
  text: string,  
}  
  
@Reusable  
@Component  
struct RichTextCom {  
  @Prop text: string = ''  
  @Prop type: number = 0  
  @Prop index: number = 0  
  
  build() {  
    Row() {  
      if (this.type === 1) {  
        RichText(this.text)  
          .width('100%')  
          .height(40)  
      } else {  
        Text(this.text)  
          .height(40)  
          .textAlign(this.index % 2 === 0 ? TextAlign.Start : TextAlign.End)  
          .width('100%')  
      }  
    }  
  }  
}  
  
@Entry  
@Component  
struct RichTextDemoPage {  
  @State list: TextClazz[] = []  
  private dataSource = new CommonDataSource<TextClazz>()  
  
  aboutToAppear(): void {  
    for (let i = 0; i < 200; i++) {  
      let itemData: TextClazz = {  
        type: 0,  
        text: 'hello ' + i  
      }  
      if (i % 10 === 0 || i <= 5) {  
        itemData = {  
          type: 1,  
          text: "xxx"  
        }  
      }  
      this.list.push(itemData)  
    }  
    this.dataSource.setData(this.list)  
  }  
  
  build() {  
    Column() {  
      List() {  
        LazyForEach(this.dataSource, (item: TextClazz, index: number) => {  
          ListItem() {  
            RichTextCom({text: item.text, type: item.type, index: index})  
          }  
        }, (item: TextClazz) => JSON.stringify(item))  
      }  
      .cachedCount(8)  
      .constraintSize({maxWidth: '100%'})  
      .height('100%')  
      .margin({left: 16, right: 16})  
    }  
    .width('100%')  
    .height('100%')  
  }  
}  
  
// CommonDataSource.ets  
export class CommonDataSource<T> implements IDataSource {  
  private listeners: DataChangeListener[] = [];  
  protected originDataArray: T[] = [];  
  
  totalCount(): number {  
    return this.originDataArray.length;  
  }  
  
  getAllData(): T[] {  
    return this.originDataArray  
  }  
  
  getData(index: number) {  
    return this.originDataArray[index];  
  }  
  
  addData(index: number, data: T): void {  
    this.originDataArray.splice(index, 0, data);  
    this.notifyDataAdd(index);  
  }  
  
  pushData(data: T): void {  
    this.originDataArray.push(data);  
    this.notifyDataAdd(this.originDataArray.length - 1);  
  }  
  
  pushDataArray(...items: T[]): void {  
    for (let data of items) {  
      this.originDataArray.push(data);  
      this.notifyDataAdd(this.originDataArray.length - 1);  
    }  
  }  
  
  deleteDataUseContent(data: T): void {  
    let delIndex: number = -1  
    for (let index = 0; index < this.originDataArray.length; index++) {  
      const element = this.originDataArray[index];  
      if (data === element) {  
        delIndex = index  
      }  
    }  
    if (delIndex != -1) {  
      this.deleteData(delIndex)  
    }  
  }  
  
  deleteData(index: number): void {  
    this.originDataArray.splice(index, 1);  
    this.notifyDataDelete(index);  
  }  
  
  clear() {  
    this.originDataArray.splice(0, this.originDataArray.length)  
    this.listeners.forEach(listener => {  
      listener.onDataDelete(0)  
    })  
  }  
  
  setData(dataArray?: T[]) {  
    if (dataArray) {  
      this.originDataArray = dataArray  
    } else {  
      this.originDataArray = []  
    }  
    this.notifyDataReload()  
  }  
  
  registerDataChangeListener(listener: DataChangeListener): void {  
    if (this.listeners.indexOf(listener) < 0) {  
      this.listeners.push(listener);  
    }  
  }  
  
  unregisterDataChangeListener(listener: DataChangeListener): void {  
    const pos = this.listeners.indexOf(listener);  
    if (pos >= 0) {  
      this.listeners.splice(pos, 1);  
    }  
  }  
  
  notifyDataReload() {  
    this.listeners.forEach(listener => {  
      listener.onDataReloaded();  
    })  
  }  
  notifyDataAdd(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataAdd(index);  
    })  
  }  
  
  notifyDataMove(from: number, to: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataMove(from, to);  
    })  
  }  
  
  notifyDataDelete(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataDelete(index);  
    })  
  }  
  
  notifyDataChange(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataChange(index);  
    })  
  }  
}
分享
微博
QQ
微信
回复
2024-10-09 17:52:34
相关问题
如何查看mysql表里面的数据?
2349浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动
189浏览 • 1回复 待解决
HarmonyOS html文本显示问题
754浏览 • 1回复 待解决