[HarmonyOS NEXT 实战案例：电商应用] 基础篇 - 垂直分割布局打造商品详情页
项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
引言
电商应用是移动应用开发中的重要场景之一，其中商品详情页是用户了解商品信息、做出购买决策的关键界面。一个设计良好的商品详情页需要清晰展示商品图片、价格、规格等信息，并提供便捷的购买操作。本教程将详细讲解如何使用HarmonyOS NEXT的ColumnSplit组件构建一个电商商品详情页，通过垂直分割布局将界面分为商品图片区域和商品信息区域。
组件概述
在本案例中，我们将使用以下HarmonyOS NEXT组件：
| 组件名称 | 功能描述 |
|---|---|
ColumnSplit |
垂直分割布局容器，将界面分为左右两部分 |
Column |
垂直布局容器，用于垂直排列子组件 |
Row |
水平布局容器，用于水平排列子组件 |
Stack |
堆叠布局容器，用于将多个组件叠放在一起 |
Image |
图片组件，用于显示商品图片 |
Text |
文本组件，用于显示商品名称、价格等信息 |
Button |
按钮组件，用于收藏、加入购物车和购买操作 |
ForEach |
循环渲染组件，用于渲染商品规格选项和评分星星 |
代码实现
组件结构
首先，我们定义了一个名为EcommerceProductExample的自定义组件：
@Component
export struct EcommerceProductExample {
build() {
// 组件内容
}
}
外层容器
我们使用Column组件作为最外层容器，包含标题文本和主要内容区域：
Column() {
Text('电商商品详情页布局')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({
bottom: 10 })
ColumnSplit() {
// ColumnSplit内容
}
.height(600)
}
.padding(15)
外层Column设置了15的内边距，确保整个界面与屏幕边缘有适当的间距。
垂直分割布局
我们使用ColumnSplit组件将界面分为上下两部分：
ColumnSplit() {
// 商品图片区域
Stack() {
// 商品图片区域内容
}
.height('45%')
// 商品信息区域
Column() {
// 商品信息区域内容
}
.padding(15)
}
.height(600)
在这个ColumnSplit中：
- 上部区域是商品图片区域，占总高度的45%，使用
Stack组件实现 - 下部区域是商品信息区域，使用
Column组件实现，设置了15的内边距 - 整个
ColumnSplit的高度设置为600像素
商品图片区域
商品图片区域使用Stack组件，包含商品图片和收藏按钮：
Stack() {
Image($r('app.media.big30'))
.width('100%')
.height(300)
.objectFit(ImageFit.Cover)
// 收藏按钮
Button($r('app.media.big28'))
.width(30)
.height(30)
.position({
x: '85%', y: 20 })
.backgroundColor('#ffffff')
.opacity(0.8)
.borderRadius(20)
}
.height('45%')
在这个区域中：
- 商品图片宽度为100%，高度为300像素，使用
objectFit(ImageFit.Cover)确保图片填满区域并保持比例 - 收藏按钮使用
position属性定位在右上角，背景色为白色，透明度为0.8，圆角为20像素
商品信息区域
商品信息区域使用Column组件，包含商品名称、价格信息、评分、规格选择和购买按钮：
Column() {
Text('高端无线蓝牙耳机')
.fontSize(22)
.fontWeight(FontWeight.Bold)
.margin({
top: 15 })
Row() {
Text('¥499')
.fontSize(24)
.fontColor('#ff4500')
Text('¥899')
.fontSize(16)
.fontColor('#999')
.decoration({
type: TextDecorationType.LineThrough })
.margin({
left: 10 })
Text('5.5折')
.fontSize(14)
.fontColor('#ffffff')
.backgroundColor('#ff4500')
.borderRadius(3)
.padding({
left: 5, right: 5 })
.margin({
left: 10 })
}
.margin({
top: 10 })
// 商品评分
Row() {
ForEach([1, 2, 3, 4, 5], (index: number) => {
Image($r('app.media.01'))
.width(16)
.height(16)
.margin({
right: 2 })
})
Text('4.9')
.fontSize(14)
.margin({
left: 5 })
Text('(1288条评价)')
.fontSize(14)
.fontColor('#666')
.margin({
left: 5 })
}
.margin({
top: 10 })
// 商品规格选择
Text('选择规格')
.fontSize(16)
.margin({
top: 20 })
Row() {
ForEach(['黑色', '白色', '蓝色'], (color: string) => {
Button(color)
.width(80)
.height(36)
.margin({
right: 10 })
.borderRadius(5)
})
}
.margin({
top: 10 })
// 购买按钮
Row() {
Button('加入购物车')
.width('48%')
.height(50)
.fontSize(16)
.backgroundColor('#ff9500')
Button('立即购买')
.width('48%')
.height(50)
.fontSize(16)
.backgroundColor('#ff4500')
.margin({
left: '4%' })
}
.margin({
top: 20 })
}
.padding(15)
在这个区域中：
商品名称：使用22像素的粗体字体，设置了15像素的上边距
价格信息：包含当前价格、原价和折扣信息
- 当前价格使用24像素的红色字体
- 原价使用16像素的灰色字体，添加删除线效果
- 折扣信息使用14像素的白色字体，红色背景，圆角为3像素
商品评分：使用
ForEach循环渲染5个星星图标，后面显示评分和评价数量规格选择：包含一个标题文本和三个颜色选择按钮
- 标题文本使用16像素的字体，设置了20像素的上边距
- 颜色选择按钮使用
ForEach循环渲染，每个按钮宽度为80像素，高度为36像素，圆角为5像素
购买按钮：包含"加入购物车"和"立即购买"两个按钮
- 每个按钮宽度为父容器的48%，高度为50像素，字体大小为16像素
- "加入购物车"按钮背景色为橙色
- "立即购买"按钮背景色为红色，左边距为父容器的4%
布局分析
垂直分割的应用
在本案例中，我们使用ColumnSplit组件将界面分为上下两部分：
上部区域（商品图片区域）：
- 占总高度的45%
- 使用
Stack组件实现，可以将收藏按钮叠放在商品图片上 - 商品图片填满整个区域，保持比例
下部区域（商品信息区域）：
- 占总高度的55%（隐式设置）
- 使用
Column组件实现，垂直排列各个信息块 - 设置了内边距，确保内容与边缘有适当的间距
这种垂直分割的布局方式非常适合商品详情页，使得用户可以清晰地看到商品图片，同时方便地浏览商品信息和操作购买按钮。
堆叠布局的应用
在商品图片区域，我们使用Stack组件实现堆叠布局，将收藏按钮叠放在商品图片上：
Stack() {
Image($r('app.media.big30'))
// 图片属性
Button($r('app.media.big28'))
// 按钮属性和位置
}
Stack组件的特点是后添加的子组件会叠放在先添加的子组件上面。在这个例子中，收藏按钮会显示在商品图片的上面。
我们使用position属性来定位收藏按钮的位置：
.position({
x: '85%', y: 20 })
这表示按钮的左上角距离Stack容器左边缘的85%位置，距离上边缘20像素。
循环渲染的应用
在本案例中，我们使用ForEach组件实现循环渲染，用于渲染评分星星和颜色选择按钮：
// 评分星星
ForEach([1, 2, 3, 4, 5], (index: number) => {
Image($r('app.media.01'))
// 图片属性
})
// 颜色选择按钮
ForEach(['黑色', '白色', '蓝色'], (color: string) => {
Button(color)
// 按钮属性
})
ForEach组件接收一个数组和一个回调函数，对数组中的每个元素调用回调函数来渲染对应的组件。这种方式可以避免重复编写类似的代码，使代码更加简洁和易于维护。
布局技巧
比例设置
在本案例中，我们使用百分比来设置商品图片区域的高度（height('45%')），这样可以确保在不同屏幕尺寸下，商品图片区域和商品信息区域的比例保持一致。
边距设置
我们为各个组件设置了适当的边距，确保界面布局美观：
- 外层
Column设置了15的内边距，确保整个界面与屏幕边缘有适当的间距 - 商品信息区域设置了15的内边距，确保内容与边缘有适当的间距
- 各个信息块之间设置了适当的上边距，确保信息块之间有适当的间距
- 颜色选择按钮之间设置了10的右边距，确保按钮之间有适当的间距
- 购买按钮之间设置了4%的左边距，确保按钮之间有适当的间距
文本样式设置
我们为不同类型的文本设置了不同的样式，使界面层次分明：
- 商品名称使用22像素的粗体字体，突出显示
- 当前价格使用24像素的红色字体，吸引用户注意
- 原价使用16像素的灰色字体，添加删除线效果，表示已降价
- 折扣信息使用14像素的白色字体，红色背景，突出显示
- 评分和评价数量使用14像素的字体，评价数量使用灰色字体，区分主次信息
总结
在本教程中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建一个电商商品详情页。通过垂直分割布局，我们将界面分为商品图片区域和商品信息区域，使得界面结构清晰，信息展示合理。
我们还学习了如何使用Stack组件实现堆叠布局，如何使用ForEach组件实现循环渲染，以及如何设置各种样式和边距，使界面美观易用。
