線性布局案例：商品列表

大家好，我是潘Sir，持續分享IT技術，幫你少走彎路。《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容、歡迎關注！

ArkUI提供了豐富的系統組件，用于制作鴻蒙原生應用APP的UI，本文通過簡單案例演示如何使用Column和Row組件實現線性布局。

一、商品列表

1.1 效果圖

相關知識：

? 線性布局

? 渲染控制：循環渲染、條件渲染

1.2 實現代碼

拷貝素材

? 將mate60.png拷貝到resources/base/media目錄

? 在pages/layout/linear下新建ProductListPage.ets文件

1.2.1 先實現靜態界面

界面分析

@Entry
@Component
struct ProductListPage {
  build() {
    Column({ space: 8 }) {
      // 標題
      Row() {
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 商品列表
      Row({ space: 10 }) {
        Image($r('app.media.mate60'))
          .width(100)
        Column({ space: 4 }) {
          Text('華為Mate60')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('￥ 6999')
            .fontColor('#F36')
            .fontSize(18)
        }
        .height('100%')
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .backgroundColor('#FFF')
      .borderRadius(20)
      .height(120)
      .padding(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}

效果圖

1.2.2 數據循環渲染

由于列表項都相同，因此可以直接復制實現界面。但是這會導致大量重復代碼，因此考慮使用循環渲染實現，先定義數據類型Item，接著定義數據items，再使用foreach循環渲染數據到界面，將寫死的數據從items里取出即可。

class Item {
  name: string //小寫
  image: ResourceStr
  price: number

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

@Entry
@Component
struct ProductListPage {
  // 商品數據
  private items: Array<Item> = [
    new Item('華為Mate60', $r('app.media.mate60'),6999),
    new Item('MateBookProX', $r('app.media.mate60'),13999),
    new Item('WatchGT4', $r('app.media.mate60'),1438),
    new Item('FreeBuds Pro3', $r('app.media.mate60'),1499),
    new Item('Mate X5', $r('app.media.mate60'),12999)
  ]

  build() {
    Column({ space: 8 }) {
      // 標題
      Row() {
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 商品列表
      ForEach(
        this.items,
        (item:Item)=>{
          Row({ space: 10 }) {
            Image(item.image)
              .width(100)
            Column({ space: 4 }) {
              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)
        }
      )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}

效果圖

1.2.3 數據條件渲染

有的商品參加打折活動，會多一個折扣價，因此需要根據商品是否打折顯示不同的價格信息。

首先修改商品數據類型，添加折扣discount字段；然后再打折商品上添加折扣價；最后再通過條件渲染界面。

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
  }
}

@Entry
@Component
struct ProductListPage {
  // 商品數據
  private items: Array<Item> = [
    new Item('華為Mate60', $r('app.media.mate60'),6999, 500),
    new Item('MateBookProX', $r('app.media.mate60'),13999),
    new Item('WatchGT4', $r('app.media.mate60'),1438),
    new Item('FreeBuds Pro3', $r('app.media.mate60'),1499),
    new Item('Mate X5', $r('app.media.mate60'),12999)
  ]

  build() {
    Column({ space: 8 }) {
      // 標題
      Row() {
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 商品列表
      ForEach(
        this.items,
        (item:Item)=>{
          Row({ space: 10 }) {
            Image(item.image)
              .width(100)
            Column({ space: 4 }) {
              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)
              }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)
        }
      )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}

效果圖

《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容，防止迷路，歡迎關注！