HarmonyOS鸿蒙NEXT中首页病虫害自定义列表项组件PestListView，避免冗余代码

HarmonyOS鸿蒙NEXT中首页病虫害自定义列表项组件PestListView，避免冗余代码

核心知识点

  1. 自定义PestListView组件
  2. 定义病虫害实体类PestModel对象

在HomePage.ets文件中定义一个组件PestListView，该组件必需的3个属性：病虫害图片、农作物名称、病虫害名称。以及接收外部输入参数病虫害实体PestModel。

@Component
struct PestListView{
  private lstItem?:PestModel;
  private lstItemImg?:string | Resource;
  private lstItemTitle?:string | Resource;
  private lstItemId?:number;
  private lstItemPest?:string | Resource;

  aboutToAppear(): void {
    this.lstItemId=this.lstItem?.ID;
    this.lstItemImg=this.lstItem?.Img;
    this.lstItemTitle=this.lstItem?.Type;
    this.lstItemPest=this.lstItem?.PestName;
  }

  build() {
    Stack({alignContent:Alignment.TopStart}){
      // 背景图
      Image(this.lstItemImg)
        .objectFit(ImageFit.Cover)
        .aspectRatio(1.32)
        .syncLoad(true)
        .borderRadius(12)
      Column(){
        // 农作物品名
        Text(this.lstItemTitle)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .alignSelf(ItemAlign.Start)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
        // 病虫害名称
        Text(this.lstItemPest)
          .fontSize(12)
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({top:4})
      }
      .margin({left:8,top:8})
      .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
      .borderRadius(8)
      .padding(4)
    }
  }
}

定义病虫害实体类PestModel：

ets>>models>>新建ArkTS文件，命名为PestModel。

export default class PestModel {
  /**
   * 病害ID
   */
  ID?:number;

  /**
   * 农作物品名
   */
  Type?:string | Resource;

  /**
   * 病害图片
   */
  Img?:Resource | string;

  /**
   * 病害名称
   */
  PestName?:string | Resource;

  /**
   * 病害描述
   */
  PestDesc?:string | Resource;

  /**
   * 病害控制方法
   */
  PestCtrl?:string | Resource;
}

病虫害图片集可能有多个，数据源来自于云端API请求结果或本地数据库。在此我们本地定义一个数据集常量LIST_PEST_DATA。

ets>>models>>新建ArkTS文件，命名为LIST_PEST_DATA，并添加2个数组元素：

import PestModel from "./PestModel";

export const LIST_PEST_DATA:Array<PestModel>=[
  {
    ID:1,
    Img:$r('app.media.p_putao_heidou'),
    Type:'葡萄',
    PestName:'黑豆病',
  },
  {
    ID:2,
    Img:$r('app.media.p_yumi_heiseyeban'),
    Type:'玉米',
    PestName:'灰色叶斑病',
  }
]

遍历数据集数组对象LIST_PEST_DATA，动态加载病虫害列表项ListItem：

List(){
  ForEach(LIST_PEST_DATA,(item:PestModel,index:number)=>{
    ListItem(){
      PestListView({lstItem:item})
    }
    .margin({right:6,top:12})
    .borderRadius(12)
    .onClick(() => {
      // TODO:跳转病害详情页面

    })
  })
}
.width('95%')
.margin({left:12,top:6,right:6,bottom:12})
.lanes(2)

更多关于HarmonyOS鸿蒙NEXT中首页病虫害自定义列表项组件PestListView，避免冗余代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS NEXT中实现PestListView自定义列表项组件时，建议使用ArkUI的声明式UI开发方式。通过@Component装饰器创建可复用自定义组件，利用@Builder构建动态列表项布局。对于数据绑定，推荐使用@State和@Prop管理组件状态，避免直接操作DOM。可结合ForEach渲染列表数据，通过条件渲染(@if)处理不同病虫害类型展示差异。性能优化方面，建议设置列表项固定高度或使用LazyForEach懒加载。

更多关于HarmonyOS鸿蒙NEXT中首页病虫害自定义列表项组件PestListView，避免冗余代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中实现PestListView组件时，可以通过以下方式优化代码避免冗余：

  1. 组件属性优化：可以直接使用PestModel作为唯一参数，避免重复定义属性
@Component
struct PestListView {
  private item: PestModel;

  build() {
    Stack({alignContent:Alignment.TopStart}){
      Image(this.item.Img)
        //...保持原有样式
      Column(){
        Text(this.item.Type)
        Text(this.item.PestName)
      }
      //...保持原有样式
    }
  }
}

  1. 数据绑定简化：直接使用item属性，无需在aboutToAppear中赋值

  2. 使用方式更简洁：

ForEach(LIST_PEST_DATA, (item: PestModel) => {
  ListItem(){
    PestListView({item: item})
  }
  //...保持原有样式
})

这种实现方式更符合ArkTS的最佳实践，减少了不必要的属性定义和赋值操作，使代码更加简洁清晰。组件只关注渲染逻辑，数据通过props直接传入，职责分离更明确。

回到顶部