鸿蒙开发实践项目——商城列表

 一、项目概述

在ArkTS环境中运用各个组件简单构建一个商城列表的页面，要求熟练掌握基本组件的用法以及灵活运用的程度。同时页面布局较为简单，适用于鸿蒙开发的新手的实践项目。总体构建页面最终如下：

二、项目结构

根据预览图可先构建出一副构架图。同时因为所需编写的代码比较多，需要抽取部分代码来简写主代码。最终可根据构架图所写出对应的项目分类。构架图及项目分类如下：

三、项目分解——头部标题部分

因为这个标题部分以后会被经常用到，所以在新建立的CommonComponents里编写标题部分的代码，以方便导出应用到各个页面上。这个商城列表也不例外。

而根据预览图我们可知，整个商城列表是纵向排列，标题部分是横向排列。因此标题部分整体用Row组件包括。

剩下的就很简单了，用两个Inmage组件引入两个图标，再在两个图标中间用Text组件编写标题的名字，最后分别设好宽度和高度以及标题的字体样式，把整体用export导出就完成了。

其中需要注意的是，因为这个自定义的组件可能会不止一次用到，所以标题名字不能定死，需要定义一个标题类以方便更新。代码如下：

@Component
export  struct Header{
  private title:ResourceStr
  build() {
    Row() {
      Image($r('app.media.back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

 四、项目分解——列表部分

4.1自定义列表样式

根据预览图我们可知，这个列表需要List循环渲染，这样只需做一种样式便可都循环渲染，简洁了代码空间。

首先，我们需要单独定义一个列表样式的自定义组件。列表样式不乏有二，图片以及价格信息。

其中，单个列表信息是横向排列，而价格信息则是纵向排列。所以应该用Row组件包裹着Column组件。图片只需用Image组件引入并设置好宽度以及内外边距就可。关键在于价格信息有三行或是一行，所以我们需要用if-else判断语句。

而这些图片以及价格信息需要事先定义好一个类，以方便引用。整体如下;

class Item{
  name: string
  image: ResourceStr
  price: number
  discount:number

  constructor( name: string,image: ResourceStr,price: number,discount:number=0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

//全局自定义构建函数↓ ↓ ↓
@Builder function ItemCard(item: Item){
  Row({space:20}){
    Image(item.image)
      .width(100)
    Column({space:10}){
      if (item.discount){
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥'+ item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({type:TextDecorationType.LineThrough})
        Text('折扣价：￥'+ (item.price-item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥'+ item.discount)
          .fontColor('#F36')
          .fontSize(18)
        Text('￥'+ item.price)
          .fontColor('#F36')
          .fontSize(18)
      }else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥'+ item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}

4.2、主体代码

列表样式定义好，最后只需写一个数组，把这些商品所需信息输入进去。最后运用List和Foreach循环渲染单个列表样式，再做些宽高等页面调整，导入标题部分，整个页面就完成了。

import {Header} from '../componets/CommonComponents'
@Entry
@Component
struct ItemPage{
  private items: Array<Item>= [
    new Item('华为nova12',$r('app.media.1'),3399),
    new Item('华为Mate60',$r('app.media.2'),6999),
    new Item('华为Matebookxpro',$r('app.media.3'),14999,599),
    new Item('华为Matepadpro',$r('app.media.4'),5699),
    new Item('华为Freebuds4e',$r('app.media.5'),399),
    new Item('华为Matebookk14',$r('app.media.6'),5699,200),
    new Item('华为Matex5',$r('app.media.7'),12999)
  ]
  build(){
    Column({space:8}){
     //标题部分
      Header({title:'苹果商城'})
       .margin({bottom:20})

      List({space:10}) {
        ForEach(
        this.items,
        (item:Item) => {
          ListItem(){
           ItemCard(item)
          }
        }
      )}
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}