HarmonyOS初级案例:List列表

 本案例演示了如何用List组件搭配其他语法构建一个商品列表,重点在于对类、构造方法、构造函数以及在用循环渲染列表时需要的参数等这些概念的深刻理解,在构建列表时会频繁用到这些知识


//定义产品类
export class Product {
  img: Resource
  name: string
  model: string
  money: number
  discount?: number
  //构造方法
  constructor(img: Resource, name: string, model: string, money: number, discount?: number) {
    this.img = img
    this.name = name
    this.model = model
    this.money = money
    this.discount = discount
  }
}
//继承模式,封装属性,只能写在全局位置
@Extend(Text) function money() {
  .fontSize(12)
  .fontWeight(400)
  .fontColor(Color.Grey)
  .margin({ left: 15 })
}

@Entry
@Component
export default struct ProductList {
  //用函数封装了每一个listitem()的内容
  @Builder ProductCard(Product: Product) {
    Row() {
      Image(Product.img).width(60).height(60)
      Column({ space: 5 }) {
        Row() {
          Text(Product.name).fontSize(18).fontWeight(500).width('25%')

你可能感兴趣的:(harmonyos,华为)