一、整体效果预览
![](https://img-blog.csdnimg.cn/direct/874c11280e144ffcbcd0a6abd4b44544.gif)
二、整体分析
![](https://img-blog.csdnimg.cn/direct/22c5c76106fd4884b88c03d0d67e2c2c.png)
三、代码实现
// 此段代码为功能实现核心代码
Column({ space: 8 }) {
Row() {
Text('商品列表')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('90%')
.height(30)
.margin({ bottom: 20, top: 20, left: 0 })
List({ space: 8 }) {
ForEach(
this.items,
(item: Item) => {
ListItem() {
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(13)
.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('90%')
.backgroundColor('#FFF')
.borderRadius(20)
.height(120)
.padding(10)
.margin({ left: 20 })
}
}
)
}
.width('100%')
.height('100%')
.layoutWeight(1) //布局权重
}
.width('100%')
.height('100%')
.backgroundColor('#CCC')