＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】14.【端侧工程】首页病虫害自定义列表项组件原创

鸿花粉H

发布于 2025-6-2 20:58

浏览

0收藏

核心知识点

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)

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2025-6-2 21:00:27修改