「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现

本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构，我们将创建一个动态购物车，支持商品的添加、移除以及实时总价计算。

---

关键词

• UI互动应用
• 接口定义
• 购物车功能
• 动态计算
• 商品管理
• 列表操作

---

一、功能说明

简易购物车功能包含以下交互：

1. 商品添加：将商品从商品列表添加到购物车。
2. 商品移除：从购物车中移除指定商品。
3. 动态总价计算：实时计算购物车内商品的总价。
4. 列表展示：动态展示商品和购物车内容。

---

二、所需组件

• @Entry 和 @Component 装饰器
• List 和 ListItem 组件用于商品和购物车列表展示
• Row 和 Column 布局组件
• Text 组件用于展示商品信息和总价
• Button 组件用于添加和移除商品
• @State 修饰符用于状态管理

---

三、项目结构

• 项目名称：SimpleShoppingCart
• 自定义组件名称：ShoppingCartPage
• 代码文件：ProductInterface.ets、ShoppingCartPage.ets、Index.ets

---

四、代码实现

1. 定义商品接口

// 文件名：ProductInterface.etsexport interface Product {name: string; // 商品名称price: number; // 商品价格
}

---

2. 购物车页面代码

// 文件名：ShoppingCartPage.etsimport { Product } from './ProductInterface';@Component
export struct ShoppingCartPage {@State cartItems: Product[] = []; // 购物车商品列表@State totalPrice: number = 0; // 总价private items: Product[] = this.loadProducts(); // 加载商品列表// 从接口加载商品loadProducts(): Product[] {return [{ name: '苹果', price: 5 },{ name: '橙子', price: 7 },{ name: '香蕉', price: 3 },];}// 添加商品到购物车addItem(item: Product): void {this.cartItems.push(item);this.updateTotalPrice();}// 从购物车移除商品removeItem(index: number): void {this.cartItems.splice(index, 1);this.updateTotalPrice();}// 更新总价updateTotalPrice(): void {this.totalPrice = this.cartItems.reduce((sum, item) => sum + item.price, 0);}build(): void {Column({ space: 20 }) {Text('简易购物车').fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 商品列表ForEach(this.items, (item: Product) => {Row({ space: 10 }) {Text(`${item.name} - ¥${item.price}`).fontSize(18);Button('添加商品').onClick(() => this.addItem(item)).width(100);}.margin({ top: 10 });});// 购物车展示Text('购物车').fontSize(20).margin({ top: 20 });List({ space: 10 }) {ForEach(this.cartItems, (item: Product, index) => {ListItem() {Row({ space: 10 }) {Text(`${item.name} - ¥${item.price}`).fontSize(18);Button('移除').onClick(() => this.removeItem(index)).width(80);}}});}.width('100%');// 显示总价Text(`总价: ¥${this.totalPrice}`).fontSize(20).margin({ top: 20 });}.padding(20).width('100%').height('100%');}
}

---

3. 主入口文件

// 文件名：Index.etsimport { ShoppingCartPage } from './ShoppingCartPage';@Entry
@Component
struct Index {build() {Column() {ShoppingCartPage() // 调用购物车页面}.padding(20);}
}

---

效果示例：用户可以动态添加商品到购物车，移除商品，并实时查看购物车的总价。

效果展示：

---

五、代码解读

1. 商品接口定义

   • 使用 Product 接口定义商品的结构，包含 name 和 price 两个属性。

2. 商品列表展示

   • 使用 ForEach 遍历商品数组，动态生成商品名称和“添加商品”按钮。

3. 购物车操作

   • addItem() 将商品添加到购物车数组，removeItem() 从购物车数组中删除商品。

4. 动态总价计算

   • updateTotalPrice() 使用 reduce 函数动态计算购物车商品的总价。

5. 状态管理

   • 使用 @State 修饰符管理购物车商品列表和总价，实现界面和数据的实时更新。

---

六、优化建议

1. 添加商品搜索功能，便于用户快速查找商品。
2. 支持商品数量调整，而非仅仅添加或移除。
3. 提供总价折扣功能，提升用户体验。

---

七、效果展示

• 动态商品添加与移除：用户可以灵活添加或移除商品。
• 实时总价更新：购物车总价实时计算并显示。
• 直观的界面布局：清晰展示商品列表和购物车内容。

---

八、相关知识点

• 「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解

---

小结

通过本篇教程，用户学会了通过接口定义商品结构，结合状态管理和列表操作，实现动态的购物车功能，为构建复杂的商品管理类应用打下基础。

---

下一篇预告

在下一篇「UI互动应用篇26 - 数字填色游戏」中，我们将学习如何实现一个互动式的数字填色小游戏，进一步提升用户界面的趣味性和互动性。

---

上一篇： 「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台

下一篇： 「Mac畅玩鸿蒙与硬件49」UI互动应用篇26 - 数字填色游戏

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=613
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---