当前位置：首页 > article >正文

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

article 2025/1/5 9:02:52

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

在这里插入图片描述

关键词

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

一、功能说明

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

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

二、所需组件

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

三、项目结构

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

四、代码实现

1. 定义商品接口

// 文件名：ProductInterface.ets

export interface Product {
  name: string; // 商品名称
  price: number; // 商品价格
}

2. 购物车页面代码

// 文件名：ShoppingCartPage.ets

import { 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.ets

import { ShoppingCartPage } from './ShoppingCartPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      ShoppingCartPage() // 调用购物车页面
    }
    .padding(20);
  }
}