[HarmonyOS NEXT 实战案例：电商应用] 进阶篇 - 交互功能与状态管理

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

引言

在基础篇中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建电商商品详情页的基本布局。在本篇教程中，我们将进一步探讨如何为商品详情页添加交互功能和状态管理，包括商品规格选择、收藏状态切换、数量调整等功能，使界面更加动态和交互友好。

状态管理概述

在HarmonyOS NEXT中，状态管理是实现交互功能的关键。通过定义和管理状态变量，我们可以使界面根据用户操作动态更新。在本案例中，我们使用了@State装饰器定义了四个状态变量：

@Component
export struct ECommerceDetailExample {
   
    @State currentImageIndex: number = 0
    @State selectedSize: string = 'M'
    @State quantity: number = 1
    @State isFavorite: boolean = false

    build() {
   
        // 组件内容
    }
}

这些状态变量的作用如下：

当这些状态变量发生变化时，HarmonyOS NEXT的声明式UI框架会自动更新相关的UI元素，无需手动操作DOM。

交互功能实现

1. 图片轮播与指示器

在商品详情页中，图片轮播是展示商品多角度视图的重要功能。我们使用Swiper组件实现图片轮播，并通过onChange事件更新currentImageIndex状态：

Swiper() {
   
    ForEach([
        $r('app.media.big19'),
        $r('app.media.big18'),
        $r('app.media.big17')
    ], (img: Resource, index: number) => {
   
        Image(img)
            .width('100%')
            .height(300)
            .objectFit(ImageFit.Cover)
    })
}
.indicatorStyle({
   
    color: '#ff4757',
    selectedColor: '#ff4757'
})
.onChange((index: number) => {
   
    this.currentImageIndex = index
})

同时，我们创建了一个自定义的图片指示器，根据currentImageIndex状态显示当前图片的位置：

Row() {
   
    ForEach([0, 1, 2], (index: number) => {
   
        Circle()
            .width(8)
            .height(8)
            .margin(3)
            .fill(index === this.currentImageIndex ? '#ff4757' : '#cccccc')
    })
}
.margin({
    top: 10 })
.justifyContent(FlexAlign.Center)

这里的关键是使用条件表达式index === this.currentImageIndex ? '#ff4757' : '#cccccc'来动态设置圆点的颜色，当索引与currentImageIndex相等时，圆点显示为红色，否则显示为灰色。

2. 商品收藏功能

收藏功能是电商应用中常见的功能，我们通过一个按钮实现收藏状态的切换：

Button(this.isFavorite ? $r('app.media.01') : $r('app.media.02'))
    .width(24)
    .height(24)
    .backgroundColor(Color.Transparent)
    .onClick(() => this.isFavorite = !this.isFavorite)

这里的关键是：

1. 使用条件表达式this.isFavorite ? $r('app.media.01') : $r('app.media.02')来动态设置按钮的图标，根据收藏状态显示不同的图标。
2. 在onClick事件处理函数中使用this.isFavorite = !this.isFavorite来切换收藏状态。

当用户点击收藏按钮时，isFavorite状态会切换，按钮的图标也会相应地更新。

3. 商品规格选择

在电商商品详情页中，规格选择是用户购买前的重要步骤。我们通过一组按钮实现规格选择功能：

Flex({
    wrap: FlexWrap.Wrap }) {
   
    ForEach(['XS', 'S', 'M', 'L', 'XL'], (size: string) => {
   
        Button(size)
            .width(60)
            .height(40)
            .fontSize(14)
            .backgroundColor(this.selectedSize === size ? '#ff4757' : '#f5f5f5')
            .fontColor(this.selectedSize === size ? '#ffffff' : '#333333')
            .margin({
    right: 10, bottom: 10 })
            .onClick(() => this.selectedSize = size)
    })
}

这里的关键是：

1. 使用ForEach循环渲染一组规格按钮。
2. 使用条件表达式this.selectedSize === size ? '#ff4757' : '#f5f5f5'和this.selectedSize === size ? '#ffffff' : '#333333'来动态设置按钮的背景色和文本颜色，当规格与selectedSize相等时，按钮显示为红底白字，否则显示为灰底黑字。
3. 在onClick事件处理函数中使用this.selectedSize = size来更新选中的规格。

当用户点击某个规格按钮时，selectedSize状态会更新为对应的规格值，所有按钮的样式也会相应地更新，使得选中的按钮高亮显示。

4. 商品数量调整

数量调整是电商购买流程中的常见功能，我们通过加减按钮实现数量调整：

Row() {
   
    Button('-')
        .width(40)
        .height(40)
        .fontSize(18)
        .onClick(() => {
   
            if (this.quantity > 1) this.quantity--
        })

    Text(this.quantity.toString())
        .fontSize(16)
        .margin({
    left: 15, right: 15 })
        .width(40)
        .textAlign(TextAlign.Center)

    Button('+')
        .width(40)
        .height(40)
        .fontSize(18)
        .onClick(() => this.quantity++)
}

这里的关键是：

1. 在减少按钮的onClick事件处理函数中，我们使用条件判断if (this.quantity > 1) this.quantity--来确保数量不会小于1。
2. 在增加按钮的onClick事件处理函数中，我们直接使用this.quantity++来增加数量。
3. 使用Text(this.quantity.toString())来显示当前的数量，当quantity状态变化时，文本内容会自动更新。

高级状态管理技巧

1. 条件渲染

条件渲染是根据状态变量动态显示不同内容的技术。在本案例中，我们使用条件表达式实现了多处条件渲染：

// 图片指示器中的条件渲染
.fill(index === this.currentImageIndex ? '#ff4757' : '#cccccc')

// 收藏按钮中的条件渲染
Button(this.isFavorite ? $r('app.media.01') : $r('app.media.02'))

// 规格按钮中的条件渲染
.backgroundColor(this.selectedSize === size ? '#ff4757' : '#f5f5f5')
.fontColor(this.selectedSize === size ? '#ffffff' : '#333333')

这种条件渲染的方式使得界面可以根据状态动态更新，提供更好的视觉反馈。

2. 状态联动

状态联动是指一个状态变化会影响多个UI元素的技术。在本案例中，我们实现了多处状态联动：

• currentImageIndex状态变化会同时影响轮播图的当前页和指示器的高亮圆点。
• selectedSize状态变化会影响所有规格按钮的样式。
• quantity状态变化会影响数量文本的显示。
• isFavorite状态变化会影响收藏按钮的图标。

这种状态联动的方式使得界面各部分保持一致，提供连贯的用户体验。

3. 事件处理与状态更新

在HarmonyOS NEXT中，事件处理是通过组件的事件属性（如onClick、onChange等）实现的。在事件处理函数中，我们可以更新状态变量，从而触发界面更新：

// Swiper的onChange事件
.onChange((index: number) => {
   
    this.currentImageIndex = index
})

// 收藏按钮的onClick事件
.onClick(() => this.isFavorite = !this.isFavorite)

// 规格按钮的onClick事件
.onClick(() => this.selectedSize = size)

// 减少按钮的onClick事件
.onClick(() => {
   
    if (this.quantity > 1) this.quantity--
})

// 增加按钮的onClick事件
.onClick(() => this.quantity++)

这种事件处理与状态更新的模式是HarmonyOS NEXT声明式UI的核心，使得我们可以以声明式的方式描述界面如何响应用户操作。

交互优化策略

1. 视觉反馈

良好的视觉反馈可以帮助用户理解当前的操作状态。在本案例中，我们通过颜色变化、图标切换等方式提供了多种视觉反馈：

• 轮播图指示器通过颜色变化指示当前页。
• 收藏按钮通过图标切换指示收藏状态。
• 规格按钮通过背景色和文本颜色变化指示选中状态。

这些视觉反馈使得用户可以清楚地了解当前的操作结果。

2. 交互约束

合理的交互约束可以防止用户进行无效或错误的操作。在本案例中，我们实现了一个交互约束：

.onClick(() => {
   
    if (this.quantity > 1) this.quantity--
})

通过判断this.quantity > 1，我们确保商品数量不会小于1，防止用户进行无效的减少操作。

3. 布局优化

合理的布局可以提高交互的便捷性。在本案例中，我们通过以下方式优化了布局：

• 将底部操作栏固定在底部，使得用户随时可以进行购买操作。
• 使用Scroll组件使内容可滚动，确保在内容较多时用户仍然可以查看所有信息。
• 使用Flex组件的wrap: FlexWrap.Wrap属性使规格按钮可以自动换行，适应不同的屏幕宽度。

这些布局优化使得界面更加适应不同的使用场景和设备。

实战案例：商品详情标签页

在实际的电商应用中，商品详情页通常会包含多个标签页，如商品详情、规格参数、用户评价等。下面我们将扩展案例，添加一个标签页功能：

@Component
export struct ECommerceDetailWithTabs {
   
    @State currentImageIndex: number = 0
    @State selectedSize: string = 'M'
    @State quantity: number = 1
    @State isFavorite: boolean = false
    @State currentTab: string = '商品详情'

    build() {
   
        ColumnSplit() {
   
            // 商品图片展示区（与原案例相同）
            Column() {
   
                // ...
            }
            .height('40%')

            // 商品信息区
            Column() {
   
                Scroll() {
   
                    Column() {
   
                        // 商品标题、价格、规格选择、数量选择（与原案例相同）
                        // ...

                        // 标签页
                        Row() {
   
                            ForEach(['商品详情', '规格参数', '用户评价'], (tab: string) => {
   
                                Text(tab)
                                    .fontSize(16)
                                    .fontWeight(this.currentTab === tab ? FontWeight.Bold : FontWeight.Normal)
                                    .fontColor(this.currentTab === tab ? '#ff4757' : '#333333')
                                    .padding(10)
                                    .margin({
    right: 20 })
                                    .onClick(() => this.currentTab = tab)
                            })
                        }
                        .margin({
    bottom: 15 })

                        // 标签页内容
                        if (this.currentTab === '商品详情') {
   
                            Text('材质: 100%棉\n颜色: 浅蓝色\n款式: 休闲\n季节: 夏季\n洗涤说明: 建议手洗，不可漂白')
                                .fontSize(14)
                                .lineHeight(22)
                        } else if (this.currentTab === '规格参数') {
   
                            Column() {
   
                                this.buildSpecRow('品牌', 'BrandName')
                                this.buildSpecRow('材质', '100%棉')
                                this.buildSpecRow('款式', '休闲')
                                this.buildSpecRow('适用季节', '夏季')
                                this.buildSpecRow('适用人群', '男士')
                                this.buildSpecRow('领型', '翻领')
                                this.buildSpecRow('袖长', '短袖')
                            }
                        } else {
   
                            Column() {
   
                                this.buildReview('用户1', 5, '质量很好，面料舒适，尺码合适。')
                                this.buildReview('用户2', 4, '款式好看，就是发货有点慢。')
                                this.buildReview('用户3', 5, '第二次购买了，很满意。')
                            }
                        }
                    }
                    .padding(20)
                }
                .layoutWeight(1)

                // 底部操作栏（与原案例相同）
                Row() {
   
                    // ...
                }
                .padding(10)
                .backgroundColor('#ffffff')
                .border({
   
                    width:{
   top:1,bottom:0, left:0,right:0},
                    color:'#eee',
                    style:{
   
                        top:BorderStyle.Solid,
                    }
                })
            }
        }
        .height(600)
    }

    @Builder
    private buildSpecRow(label: string, value: string) {
   
        Row() {
   
            Text(label)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .width('30%')
            Text(value)
                .fontSize(14)
                .width('70%')
        }
        .padding(10)
        .backgroundColor(this.buildSpecRow['index'] % 2 === 0 ? '#f9f9f9' : '#ffffff')
    }

    @Builder
    private buildReview(user: string, rating: number, comment: string) {
   
        Column() {
   
            Row() {
   
                Text(user)
                    .fontSize(14)
                    .fontWeight(FontWeight.Bold)
                Blank()
                Row() {
   
                    ForEach([1, 2, 3, 4, 5], (star: number) => {
   
                        Text('★')
                            .fontSize(14)
                            .fontColor(star <= rating ? '#ff9500' : '#cccccc')
                    })
                }
            }
            .width('100%')
            .margin({
    bottom: 5 })

            Text(comment)
                .fontSize(14)
                .width('100%')
        }
        .padding(10)
        .backgroundColor('#f9f9f9')
        .borderRadius(5)
        .margin({
    bottom: 10 })
    }
}

在这个扩展案例中，我们添加了以下功能：

1. 新增了一个currentTab状态变量，用于记录当前选中的标签页。
2. 添加了一个标签页导航栏，使用ForEach循环渲染三个标签，并通过条件表达式动态设置样式。
3. 使用条件语句根据currentTab的值渲染不同的内容。
4. 添加了两个@Builder方法，用于构建规格参数行和用户评价项。

这个扩展案例展示了如何使用状态管理和条件渲染实现更复杂的交互功能。

总结

在本教程中，我们学习了如何为电商商品详情页添加交互功能和状态管理，包括商品规格选择、收藏状态切换、数量调整和详情标签页等功能。