「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.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);
  }
}

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

效果展示：

五、代码解读

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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。