当前位置: 首页 > news >正文

鸿蒙应用开发从入门到实战(十六):线性布局案例

线性布局案例:商品列表

大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!

ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文通过简单案例演示如何使用Column和Row组件实现线性布局。

一、商品列表

1.1 效果图

3折扣价列表

相关知识:

​ 线性布局

​ 渲染控制:循环渲染、条件渲染

1.2 实现代码

拷贝素材

​ 将mate60.png拷贝到resources/base/media目录

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

1.2.1 先实现静态界面

界面分析

0布局分析

@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静态界面

1.2.2 数据循环渲染

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

class Item {name: string //小写image: ResourceStrprice: numberconstructor(name: string, image: ResourceStr, price: number) {this.name = namethis.image = imagethis.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)}
}

效果图

2循环列表

1.2.3 数据条件渲染

有的商品参加打折活动,会多一个折扣价,因此需要根据商品是否打折显示不同的价格信息。

首先修改商品数据类型,添加折扣discount字段;然后再打折商品上添加折扣价;最后再通过条件渲染界面。

class Item {name: string //小写image: ResourceStrprice: numberdiscount: numberconstructor(name: string, image: ResourceStr, price: number, discount: number = 0) {this.name = namethis.image = imagethis.price = pricethis.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)}
}

效果图

3折扣价列表

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

http://www.hskmm.com/?act=detail&tid=19692

相关文章:

  • SQL注入流程
  • 完整的GLFW应用程序示例
  • 物理笔记
  • 基于Python+Vue开发的商城管理系统源码+运行步骤
  • HTML5-和-CSS3-迁移即时入门-全-
  • HTML5-多人游戏开发-全-
  • HTML5-地理位置即时操作指南-全-
  • 搭建环境
  • 20250928
  • Easysearch 国产替代 Elasticsearch:8 大核心挑战解读
  • Typescript概述和思维导图
  • 9-28
  • Qt结合ffmpeg代码实现udp推流/组播推流/rtp推流/监控GB28181推流/onvif推流
  • linux防火墙firewalld
  • 很多大公司为什么禁止在SpringBoot项目中使用Tomcat?
  • Java作业动手又动脑
  • PHP 开发者必须掌握的基本 Linux 命令
  • MetaGPT实战指南:构建模拟公司运营的多智能体系统 - 教程
  • Timeplus Enterprise 3.0 (Linux, macOS) - 流处理平台
  • 《HelloGitHub》第 114 期
  • Splunk Enterprise 10.0.1 (macOS, Linux, Windows) - 搜索、分析和可视化,数据全面洞察平台
  • 读后感
  • 读后感3
  • 读后感2
  • [Luogu 13345] EGOI 2025:IMO
  • 详细介绍:flutter 编译报错java.util.zip.ZipException: zip END header not found
  • 又一通信芯片厂商完成数亿元融资!
  • 做题总结
  • VS2022激活秘钥
  • NOIP2025模拟赛24