鸿蒙应用开发从入门到实战（十六）：线性布局案例

作者：程序员潘Sir

2025-09-28
四川
本文字数：2871 字
阅读完需：约 9 分钟

大家好，我是潘 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@Componentstruct 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@Componentstruct 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@Componentstruct 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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/5758968e9a19121d9499b844b】。文章转载请联系作者。

程序员潘Sir

关注

网名：黑马腾云 2020-06-22 加入

80后创业者、高级架构师，带你轻松学编程！著有《Node.js全栈开发从入门到项目实战》、《Java企业级软件开发》、《HarmonyOS应用开发实战》等书籍。“自学帮”公众号主。

发布

暂无评论

创作场景

鸿蒙应用开发从入门到实战（十六）：线性布局案例

一、商品列表

1.1 效果图

1.2 实现代码

1.2.1 先实现静态界面

1.2.2 数据循环渲染

1.2.3 数据条件渲染

程序员潘Sir

评论