「Mac畅玩鸿蒙与硬件48」UI互动应用篇25

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

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

在这里插入图片描述

关键词

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

一、功能说明

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

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

二、所需组件

@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);}
}