HarmonyOS list控件子组件复用

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

HarmonyOS
2024-10-10 12:58:56
浏览
收藏 0
回答 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() {  
    // ...  
  }  
}
分享
微博
QQ
微信
回复
2024-10-10 16:56:11
相关问题
HarmonyOS RelativeContainer控件显示问题
253浏览 • 1回复 待解决
鸿蒙怎么实现UI控件样式复用
7627浏览 • 3回复 待解决
HarmonyOS 组件复用问题
210浏览 • 1回复 待解决
HarmonyOS 跨HAR组件复用问题
20浏览 • 1回复 待解决
Swiper是否支持组件复用
677浏览 • 1回复 待解决
HarmonyOS 如何知道组件复用是否生效
341浏览 • 1回复 待解决
HarmonyOS Tabs组件组件问题
264浏览 • 1回复 待解决
HarmonyOS List组件和WaterFlow组件增强
428浏览 • 1回复 待解决
组件复用生效的条件有哪些?
247浏览 • 1回复 待解决
复用组件reuseId作用是什么
587浏览 • 1回复 待解决