鸿蒙组件封装使用

效果

项目目录截图

一、GoodItem代码如下

import { Item } from '../entity/Item'

/**
 * GoodItem 组件用于展示商品信息
 * 它包含商品的图片、名称、价格和优惠信息
 */
@Component
export struct GoodItem {
  // 商品项，包含商品的基本信息
  public  goodsItem: Item= new Item(0, '', 0, '', 0)

  // 构建商品展示项
  build() {
    // 确保商品项存在
    if (this.goodsItem) {
      // 使用Row组件水平布局商品图片和信息
      Row() {
        // 商品图片
        Image(this.goodsItem.img)
          .width(80)
          .height(80)
          .objectFit(ImageFit.Cover)
        // 商品名称和价格
        Column() {
          // 商品名称
          Text(this.goodsItem.name).fontSize(16).fontWeight(FontWeight.Bold)
          // 商品价格
          Text("$" + this.goodsItem.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })
          // 优惠信息
          if (this.goodsItem.discount > 0) {
            // 如果有优惠，显示优惠信息并划掉原价
            Text("打折" + this.goodsItem.discount).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 }).decoration({ type: TextDecorationType.LineThrough })
          } else {
            // 如果没有优惠，显示无优惠信息
            Text("无优惠").fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })
          }
        }.height(80).margin({ left: 10 })
      }.width('100%')
      .height(100)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .padding({ left: 8, right: 8, top: 8, bottom: 8 })
    }
  }
}

二、 Item如下

export  class Item {
  id: number
  name: string
  price: number
  img: string
  discount: number
  constructor(id: number, name: string, price: number, img: string, discount: number) {
    this.id = id
    this.name = name
    this.price = price
    this.img = img
    this.discount = discount
  }
}

最后就是index调用

import { GoodItem } from '../components/GoodItem'
import { Item } from '../entity/Item'

@Entry
@Component
struct Index {
  // 商品列表，包含多个Item对象
  private goodsList: Array<Item> = [
    new Item(1, '商品1', 100, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 200),
    new Item(2, '商品2', 200, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 203),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 22),
    new Item(4, '商品4', 400, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 55),
    new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4', 78)
  ]
  build() {
    Column() {
      List({ space: 8 }) {
        ForEach(this.goodsList, (item: Item) => {
          GoodItem({ goodsItem: item })
        })
      }
      .width('100%')
      .height('100%')

    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
    .padding(10)
  }
}

注意以上都是添加了网络权限的，不然图片加载不出来