[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中：

1. 上部区域是商品图片区域，占总高度的45%，使用Stack组件实现
2. 下部区域是商品信息区域，使用Column组件实现，设置了15的内边距
3. 整个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%')

在这个区域中：

1. 商品图片宽度为100%，高度为300像素，使用objectFit(ImageFit.Cover)确保图片填满区域并保持比例
2. 收藏按钮使用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)

在这个区域中：

1. 商品名称：使用22像素的粗体字体，设置了15像素的上边距

2. 价格信息：包含当前价格、原价和折扣信息

   • 当前价格使用24像素的红色字体
   • 原价使用16像素的灰色字体，添加删除线效果
   • 折扣信息使用14像素的白色字体，红色背景，圆角为3像素

3. 商品评分：使用ForEach循环渲染5个星星图标，后面显示评分和评价数量

4. 规格选择：包含一个标题文本和三个颜色选择按钮

   • 标题文本使用16像素的字体，设置了20像素的上边距
   • 颜色选择按钮使用ForEach循环渲染，每个按钮宽度为80像素，高度为36像素，圆角为5像素

5. 购买按钮：包含"加入购物车"和"立即购买"两个按钮

   • 每个按钮宽度为父容器的48%，高度为50像素，字体大小为16像素
   • "加入购物车"按钮背景色为橙色
   • "立即购买"按钮背景色为红色，左边距为父容器的4%

布局分析

垂直分割的应用

在本案例中，我们使用ColumnSplit组件将界面分为上下两部分：

1. 上部区域（商品图片区域）：

   • 占总高度的45%
   • 使用Stack组件实现，可以将收藏按钮叠放在商品图片上
   • 商品图片填满整个区域，保持比例

2. 下部区域（商品信息区域）：

   • 占总高度的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%')），这样可以确保在不同屏幕尺寸下，商品图片区域和商品信息区域的比例保持一致。

边距设置

我们为各个组件设置了适当的边距，确保界面布局美观：

1. 外层Column设置了15的内边距，确保整个界面与屏幕边缘有适当的间距
2. 商品信息区域设置了15的内边距，确保内容与边缘有适当的间距
3. 各个信息块之间设置了适当的上边距，确保信息块之间有适当的间距
4. 颜色选择按钮之间设置了10的右边距，确保按钮之间有适当的间距
5. 购买按钮之间设置了4%的左边距，确保按钮之间有适当的间距

文本样式设置

我们为不同类型的文本设置了不同的样式，使界面层次分明：

1. 商品名称使用22像素的粗体字体，突出显示
2. 当前价格使用24像素的红色字体，吸引用户注意
3. 原价使用16像素的灰色字体，添加删除线效果，表示已降价
4. 折扣信息使用14像素的白色字体，红色背景，突出显示
5. 评分和评价数量使用14像素的字体，评价数量使用灰色字体，区分主次信息

总结

在本教程中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建一个电商商品详情页。通过垂直分割布局，我们将界面分为商品图片区域和商品信息区域，使得界面结构清晰，信息展示合理。

我们还学习了如何使用Stack组件实现堆叠布局，如何使用ForEach组件实现循环渲染，以及如何设置各种样式和边距，使界面美观易用。