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

线性布局案例：商品列表

大家好，我是潘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 先实现静态界面

界面分析

1. @Entry
2. @Component
3. struct ProductListPage {
4.   build() {
5.     Column({ space: 8 }) {
6.       // 标题
7.       Row() {
8.         Text('商品列表')
9.           .fontSize(30)
10.           .fontWeight(FontWeight.Bold)
11.       }
12.       .width('100%')
13.       .margin({ bottom: 20 })
15.       // 商品列表
16.       Row({ space: 10 }) {
17.         Image($r('app.media.mate60'))
18.           .width(100)
19.         Column({ space: 4 }) {
20.           Text('华为Mate60')
21.             .fontSize(20)
22.             .fontWeight(FontWeight.Bold)
23.           Text('￥ 6999')
24.             .fontColor('#F36')
25.             .fontSize(18)
26.         }
27.         .height('100%')
28.         .alignItems(HorizontalAlign.Start)
29.       }
30.       .width('100%')
31.       .backgroundColor('#FFF')
32.       .borderRadius(20)
33.       .height(120)
34.       .padding(10)
35.     }
36.     .width('100%')
37.     .height('100%')
38.     .backgroundColor('#EFEFEF')
39.     .padding(20)
40.   }
41. }

复制代码

效果图

1.2.2 数据循环渲染

由于列表项都相同，因此可以直接复制实现界面。但是这会导致大量重复代码，因此考虑使用循环渲染实现，先定义数据类型Item，接着定义数据items，再使用foreach循环渲染数据到界面，将写死的数据从items里取出即可。

1. class Item {
2.   name: string //小写
3.   image: ResourceStr
4.   price: number
6.   constructor(name: string, image: ResourceStr, price: number) {
7.     this.name = name
8.     this.image = image
9.     this.price = price
10.   }
11. }
13. @Entry
14. @Component
15. struct ProductListPage {
16.   // 商品数据
17.   private items: Array<Item> = [
18.     new Item('华为Mate60', $r('app.media.mate60'),6999),
19.     new Item('MateBookProX', $r('app.media.mate60'),13999),
20.     new Item('WatchGT4', $r('app.media.mate60'),1438),
21.     new Item('FreeBuds Pro3', $r('app.media.mate60'),1499),
22.     new Item('Mate X5', $r('app.media.mate60'),12999)
23.   ]
25.   build() {
26.     Column({ space: 8 }) {
27.       // 标题
28.       Row() {
29.         Text('商品列表')
30.           .fontSize(30)
31.           .fontWeight(FontWeight.Bold)
32.       }
33.       .width('100%')
34.       .margin({ bottom: 20 })
36.       // 商品列表
37.       ForEach(
38.         this.items,
39.         (item:Item)=>{
40.           Row({ space: 10 }) {
41.             Image(item.image)
42.               .width(100)
43.             Column({ space: 4 }) {
44.               Text(item.name)
45.                 .fontSize(20)
46.                 .fontWeight(FontWeight.Bold)
47.               Text('￥'+item.price)
48.                 .fontColor('#F36')
49.                 .fontSize(18)
50.             }
51.             .height('100%')
52.             .alignItems(HorizontalAlign.Start)
53.           }
54.           .width('100%')
55.           .backgroundColor('#FFF')
56.           .borderRadius(20)
57.           .height(120)
58.           .padding(10)
59.         }
60.       )
61.     }
62.     .width('100%')
63.     .height('100%')
64.     .backgroundColor('#EFEFEF')
65.     .padding(20)
66.   }
67. }

复制代码

效果图

1.2.3 数据条件渲染

有的商品参加打折活动，会多一个折扣价，因此需要根据商品是否打折显示不同的价格信息。
首先修改商品数据类型，添加折扣discount字段；然后再打折商品上添加折扣价；最后再通过条件渲染界面。

1. class Item {
2.   name: string //小写
3.   image: ResourceStr
4.   price: number
5.   discount: number
7.   constructor(name: string, image: ResourceStr, price: number, discount: number = 0) {
8.     this.name = name
9.     this.image = image
10.     this.price = price
11.     this.discount = discount
12.   }
13. }
15. @Entry
16. @Component
17. struct ProductListPage {
18.   // 商品数据
19.   private items: Array<Item> = [
20.     new Item('华为Mate60', $r('app.media.mate60'),6999, 500),
21.     new Item('MateBookProX', $r('app.media.mate60'),13999),
22.     new Item('WatchGT4', $r('app.media.mate60'),1438),
23.     new Item('FreeBuds Pro3', $r('app.media.mate60'),1499),
24.     new Item('Mate X5', $r('app.media.mate60'),12999)
25.   ]
27.   build() {
28.     Column({ space: 8 }) {
29.       // 标题
30.       Row() {
31.         Text('商品列表')
32.           .fontSize(30)
33.           .fontWeight(FontWeight.Bold)
34.       }
35.       .width('100%')
36.       .margin({ bottom: 20 })
38.       // 商品列表
39.       ForEach(
40.         this.items,
41.         (item:Item)=>{
42.           Row({ space: 10 }) {
43.             Image(item.image)
44.               .width(100)
45.             Column({ space: 4 }) {
46.               if(item.discount){
47.                 Text(item.name)
48.                   .fontSize(20)
49.                   .fontWeight(FontWeight.Bold)
50.                 Text('原价：￥' + item.price)
51.                   .fontColor('#CCC')
52.                   .fontSize(14)
53.                   .decoration({type: TextDecorationType.LineThrough})
54.                 Text('折扣价：￥' + (item.price - item.discount))
55.                   .fontColor('#F36')
56.                   .fontSize(18)
57.                 Text('补贴：￥' + item.discount)
58.                   .fontColor('#F36')
59.                   .fontSize(18)
60.               }else {
61.                 Text(item.name)
62.                   .fontSize(20)
63.                   .fontWeight(FontWeight.Bold)
64.                 Text('￥'+item.price)
65.                   .fontColor('#F36')
66.                   .fontSize(18)
67.               }
68.             }
69.             .height('100%')
70.             .alignItems(HorizontalAlign.Start)
71.           }
72.           .width('100%')
73.           .backgroundColor('#FFF')
74.           .borderRadius(20)
75.           .height(120)
76.           .padding(10)
77.         }
78.       )
79.     }
80.     .width('100%')
81.     .height('100%')
82.     .backgroundColor('#EFEFEF')
83.     .padding(20)
84.   }
85. }

复制代码

效果图

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！