HarmonyOS list控件子组件复用

如果一个list子组件有不同的类型，list控件内部是如何处理复用的。针对这种情况编程时是否有什么需要注意的地方？

HarmonyOS

FengTianYa

2024-10-10 12:58:56

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

购物的示例，可参照着修改自己使用的组件：

复用前：

LazyForEach(this.GoodDataOne, (item, index) => {  
  GridItem() {  
    Column() {  
      Image(item.img)  
        .height(item.hei)  
        .width('100%')  
        .objectFit(ImageFit.Fill)  
      Text(item.introduce)  
        .fontSize(14)  
        .padding({ left: 5, right: 5 })  
        .margin({ top: 5 })  
      Row() {  
        Row() {  
          Text('￥')  
            .fontSize(10)  
            .fontColor(Color.Red)  
            .baselineOffset(-4)  
          Text(item.price)  
            .fontSize(16)  
            .fontColor(Color.Red)  
          Text(item.numb)  
            .fontSize(10)  
            .fontColor(Color.Gray)  
            .baselineOffset(-4)  
            .margin({ left: 5 })  
        }  
  
        Image($r('app.media.photo63'))  
          .width(20)  
          .height(10)  
          .margin({ bottom: -8 })  
      }  
      .width('100%')  
      .justifyContent(FlexAlign.SpaceBetween)  
      .padding({ left: 5, right: 5 })  
      .margin({ top: 15 })  
    }  
    .borderRadius(10)  
    .backgroundColor(Color.White)  
    .clip(true)  
    .width('100%')  
    .height(290)  
  
  }  
}, (item) => JSON.stringify(item))

复用后：组件被复用后，ArkUI框架会将组件构造对应的参数输入给aboutToResue生命周期回调，开发者需要在aboutToReuse生命周期中对需要进行更新的状态变量进行赋值，ArkUI框架将会基于最新的状态变量值对UI进行展示。如果同一种自定义组件的不同实例之间存在较大的结构差异，建议使用reuseId对不同的自定义组件实例分别标注复用组，以达到最佳的复用效果。如果一个自定义组件中，持有对某个大对象或者其他非必要资源的引用，可以在aboutToRecycle生命周期中释放，以免造成内存泄漏。

LazyForEach(this.GoodDataOne, (item, index) => {  
  GridItem() {  
    GoodItems({  
      boo:item.data.boo,  
      img:item.data.img,  
      webimg:item.data.webimg,  
      hei:item.data.hei,  
      introduce:item.data.introduce,  
      price:item.data.price,  
      numb:item.data.numb,  
      index:index  
    })  
    .reuseId(this.CombineStr(item.type))  
  }  
}, (item) => JSON.stringify(item))  
@Reusable  
@Component  
struct GoodItems {  
  @State img: Resource = $r("app.media.photo61")  
  @State webimg?: string = ''  
  @State hei: number = 0  
  @State introduce: string = ''  
  @State price: string = ''  
  @State numb: string = ''  
  @LocalStorageLink('storageSimpleProp') simpleVarName: string = ''  
  boo: boolean = true  
  index: number = 0  
  controllerVideo: VideoController = new VideoController();  
  aboutToReuse(params)  
  {  
    this.webimg = params.webimg  
    this.img = params.img  
    this.hei = params.hei  
    this.introduce = params.introduce  
    this.price = params.price  
    this.numb = params.numb  
  }  
  build() {  
    // ...  
  }  
}

2024-10-10 16:56:11

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS list控件子组件复用

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