「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);}
}
效果示例：用户可以动态添加商品到购物车，移除商品，并实时查看购物车的总价。
效果展示：
五、代码解读
-
商品接口定义
- 使用
Product接口定义商品的结构，包含name和price两个属性。
- 使用
-
商品列表展示
- 使用
ForEach遍历商品数组，动态生成商品名称和“添加商品”按钮。
- 使用
-
购物车操作
addItem()将商品添加到购物车数组，removeItem()从购物车数组中删除商品。
-
动态总价计算
updateTotalPrice()使用reduce函数动态计算购物车商品的总价。
-
状态管理
- 使用
@State修饰符管理购物车商品列表和总价，实现界面和数据的实时更新。
- 使用
六、优化建议
- 添加商品搜索功能，便于用户快速查找商品。
- 支持商品数量调整，而非仅仅添加或移除。
- 提供总价折扣功能，提升用户体验。
七、效果展示
- 动态商品添加与移除：用户可以灵活添加或移除商品。
- 实时总价更新：购物车总价实时计算并显示。
- 直观的界面布局：清晰展示商品列表和购物车内容。
八、相关知识点
- 「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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
相关文章：
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构，我们将创建一个动态购物车，支持商品的添加、移除以及实时总价计算。 关键词 UI互动应用接口定义购物车功能动态计算商品管理列表操作 一、功能说明 简易购物车功能包含以下交互&#…...
).sum())
df.groupby(pd.Grouper(level=1)).sum()
df.groupby(pd.Grouper(level1)).sum() 在 Python 中的作用是根据 DataFrame 的某一索引级别进行分组，并计算每个分组的总和。具体来说： df.groupby(...)：这是 pandas 的分组操作，按照指定的规则将 DataFrame 分组。 pd.Grouper(…...
【网络安全 | 漏洞挖掘】绕过电子邮件确认实现预账户接管
未经许可，不得转载。 文章目录 正文漏洞步骤赏金正文 我测试的应用程序有多个子域名： 1、account.example.com：处理用户账户管理。 2、project.example.com：管理用户拥有或被邀请的项目。 3、org.example.com：一个新的子域，用于管理多个项目的组织。 4、collaborator.ex…...
【SpringBoot教程】SpringBoot整合Mybatis - 前后端分离项目 - vue3
🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张 今天毛毛张将通过一个完整的前后端分离的任务来介绍SpringBoot整合Mybatis过程！ 文章目录 1.前言1.1 任务描述1.2 SpringBoot整合Mybatis概述1.3 完整项目…...
node.js之---事件驱动编程
详解事件驱动 事件驱动是基于什么实现的 事件驱动和I/O操作的关系 I/O操作和事件循环的关系 详解事件驱动 事件驱动编程（Event-driven Programming）是一种编程范式，其中程序的控制流是由“事件”驱动的。事件通常指的是用户操作、网络请…...
RK3588+FPGA全国产异步LED显示屏控制卡/屏幕拼接解决方案
RK3588FPGA核心板采用Rockchip RK3588新一代旗舰 级八核64位处理器，支持8K视频编解码，多屏4K输出，可实现12屏联屏拼接、同显、异显，适配多种操作系统，广泛适用于展览展示、广告内容投放、新零售、商超等领域实现各种媒…...
Postman测试big-event
报错500。看弹幕，知道可能是yml或sql有问题。 所以检查idea工作台， 直接找UserMapper检查，发现完全OK。 顺着这个error发现可能是sql有问题。因为提示是sql问题，而且是有now()的那个sql。 之后通过给的课件，复制课件…...
38. 考古学家
题目描述 有一个考古学家发现一个石碑，但是很可惜，发现时其已经断成多段，原地发现n个断口整齐的石碑碎片。为了破解石碑内容，考古学家希望有程序能帮忙计算复原后的石碑文字组合数，你能帮忙吗？ 输入描述 第…...
商用车自动驾驶，迎来大规模量产「临界点」？
商用车自动驾驶，正迎来新的行业拐点。 今年初，交通部公开发布AEB系统运营车辆标配征求意见稿，首次将法规限制条件全面放开，有望推动商用车AEB全面标配，为开放场景的商用车智能驾驶市场加了一把火。 另外，…...
中建海龙：科技助力福城南产业片区绿色建筑发展
在快速发展的城市化进程中，绿色建筑以其环保、节能、可持续的特点日益受到重视。作为建筑工业化领域的领军企业，中建海龙科技有限公司（简称“中建海龙”）凭借其卓越的科技实力和创新举措，在推动绿色建筑发展方面做出了…...
selenium-side-runner + edge快速使用
安装和配置 Node.js 与 Selenium-Side-Runner 1. 安装 Node.js 为了使用 selenium-side-runner，首先需要在你的系统上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它允许开发者编写服务器端代码。 通过 Winget 安装 Node.js（适用于 Windows 10/…...
ARM发布Armv9.5架构：迈向更强性能与灵活性的新时代
2024年11月30日，ARM正式发布了其最新的Armv9.5架构，这是Arm技术发展的又一重要里程碑。从表中信息来看，Armv9.5架构的发布标志着该公司的架构系列在性能、灵活性和可扩展性方面取得了进一步突破。本次发布不仅是技术上的提升，更是…...
Pytorch的自动求导模块
文章目录 torch.autograd.backward()基本用法非标量张量的反向传播保留计算图指定输入张量高阶梯度计算 与 y.backward() 的区别torch.autograd.grad()基本用法非标量张量的梯度高阶梯度计算多输入、多输出的梯度计算未使用的输入张量保留计算图 与 backward() 的区别 torch.au…...
【React】- 跨域PDF预览、下载（改文件名）、打印
我们经常会碰到跨域来方位PDF，同时需要下载、打印的需求，通常由于浏览器的安全策略，可以预览，但是下载和打印可能会受限，这时候怎么办呢？ 1.创建一个隐藏的标签 要下载 iframe 中的 PDF 文件，…...
HuggingFace 模型文件详解:如何加载本地模型？
HuggingFace 模型文件详解 在使用 HuggingFace 下载大型语言模型（如 LLaMA-3-1-8B）后，会发现模型目录下包含多个文件和文件夹。本文将详细介绍这些文件的作用以及它们在模型加载和推理过程中的功能。 文件结构总览 models--meta-llama--Lla…...
Boost之buffer
目录 一、定义和介绍 二、示例 1、点 单点 多点 2、线 3、面 单面 多面 三、总结 四、测试代码 一、定义和介绍 buffer函数是boost库(algorithms)算法模块中的构建缓冲区函数。 其函数原型为(此处为带策略型)： template<typename GeometryIn, typename MultiPolygon, typen…...
[redux] ts声明useSelector和useDispatch
先安装 安装 | Redux 中文官网 npm install react-redux npm install reduxjs/toolkit 定义一个切片 import { createSlice } from reduxjs/toolkit;const userSlice createSlice({name: user,initialState: {name: lsm,age: 24,},reducers: {}, }); //注意这里写导出redu…...
计算机网络 （19）扩展的以太网
前言 以太网（Ethernet）是一种局域网（LAN）技术，它规定了包括物理层的连线、电子信号和介质访问层协议的内容。以太网技术不断演进，从最初的10Mbps到如今的10Gbps、25Gbps、40Gbps、100Gbps等，已成…...
Ubuntu 23.10 换源
查看当前Ubuntu系统的版本 使用命令： lsb_release -a 中科大源： deb https://mirrors.ustc.edu.cn/ubuntu-old-releases/ubuntu/ mantic main restricted universe multiverse deb-src https://mirrors.ustc.edu.cn/ubuntu-old-releases/ubuntu/ man…...
如何在 Ubuntu 22.04 上优化 Apache 以应对高流量网站教程
简介 在本教程中，我们将学习如何优化 Apache 以应对高流量网站。 当运行高流量网站时，确保你的 Apache Web 服务器得到优化对于有效处理负载至关重要。在本指南中，我们将介绍配置 Apache 以提高性能和可扩展性的基本技巧。 为高流量网站优…...
Android 性能优化：内存优化（实践篇）
1. 前言 前一篇文章Android性能优化：内存优化 （思路篇） 大概梳理了Android 内存原理和优化的必要性及应该如何优化，输出了一套短期和长期内存优化治理的SOP方案。 那么这一篇文章就总结下我最近在做内存优化如何实践的࿰…...
开源数据集成平台白皮书重磅发布《Apache SeaTunnel 2024用户案例合集》！
2025年新年临近，Apache SeaTunnel 社区用户案例精选📘也跟大家见面啦！在过去的时间里，SeaTunnel 社区持续成长，吸引了众多开发者的关注与支持。 为了致谢一路同行的伙伴，也为了激励更多人加入技术共创&…...
用python编写一个放烟花的小程序
import pygame import random # 代码解释及使用说明： # 首先，导入 pygame 和 random 库。pygame 用于创建游戏窗口和图形绘制，random 用于生成随机数。 # 初始化 pygame，并设置屏幕尺寸为 800x600 像素，设置窗口标题为…...
以一个实际例子来学习Linux驱动程序开发之“设备类”的相关知识【利用设备类实现对同一设备类下的多个LED灯实现点亮或关闭】
前言 对于一个设备的驱动程序来说，其实上层用户主要看到的、用到的就是设备文件和设备类，当然用得最多的是设备文件，虽然设备类用得不多，但也是每一个设备注册实例化时必须要用到的东西，本篇博文就以一个简单的例子说…...
培训机构Day22
今天主要还是围绕着jquery讲解的，没有什么可说的。 知识点： 常用事件类型： 1.click：单击事件。鼠标，或键盘都可以触发。 2.dblclick：双击事件。 3.contextmenu：右键事件。 4.键盘相关事件&…...
Synopsys软件基本使用方法
Synopsys软件基本使用方法 1 文件说明2 编译流程3 查看波形4 联合仿真 本文主要介绍Synopsys软件vcs、verdi的基本使用方法，相关文件可从 GitHub下载。 1 文件说明 创建verilog源文件add.v、mult.v、top.vmodule add (input signed [31:0] dina,input signed [3…...
信息科技伦理与道德1：研究方法
1 问题描述 1.1 讨论？ 请挑一项信息技术，谈一谈为什么认为他是道德的/不道德的，或者根据使用场景才能判断是否道德。判断的依据是什么（自身的道德准则）？为什么你觉得你的道德准则是合理的，其他…...
手机租赁平台开发实用指南与市场趋势分析
内容概要 在当今快速变化的科技时代，手机租赁平台的发展如火如荼。随着越来越多的人希望使用最新款的智能手机，但又不愿意承担昂贵的购机成本，手机租赁平台应运而生。这种模式不仅为用户提供了灵活的选择，还为企业创造了新的商机…...
ABAQUS三维Voronoi晶体几何建模
材料晶体塑性理论与细观尺度上晶体几何模型相融合的模拟方法为探究材料在塑性变形过程中的行为机制以及晶体材料优化开辟了新途径。本案例演示在CAD软件内通过Voronoi建立晶体三维模型，并将模型导入到Abaqus CAE内，完成晶体材料的有限元建模。 在AutoC…...
职场常用Excel基础04-二维表转换
大家好，今天和大家一起分享一下excel的二维表转换相关内容~ 在Excel中，二维表（也称为矩阵或表格）是一种组织数据的方式，其中数据按照行和列的格式进行排列。然而，在实际的数据分析过程中，我们常…...
如何使用 ChatGPT Prompts 写学术论文？
第 1 部分：学术写作之旅：使用 ChatGPT Prompts 进行学术写作的结构化指南 踏上学术写作过程的结构化旅程，每个 ChatGPT 提示都旨在解决特定方面，确保对您的主题进行全面探索。 制定研究问题： “制定一个关于量子计算的社会影响的研究问题，确保清晰并与您的研究目标保持一…...
【深度学习】Java DL4J基于 LSTM 构建新能源预测模型
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探…...
Jetson系列部署YOLOv8模型教程
简介 NVIDIA Jetson系列是专为边缘计算设计的紧凑型计算模块，其目标用户为AI开发者、嵌入式系统工程师以及需要在设备端实时进行数据处理与AI推断的创新者。通过提供灵活的硬件平台，结合NVIDIA强大的GPU计算资源，Jetson系列能够支持复杂的机…...
【HAProxy】如何在Ubuntu下配置HAProxy服务器
HAProxy 是一款免费、开源且强大的反向代理程序，它为 HTTP 和 TCP 基础的应用提供了高可用性、负载均衡以及代理功能，因此对于管理高流量服务器（或 Web 应用）来说，通过将负载分散到多个节点服务器上，它是一…...
（7）洛谷：B3863：[GESP202309 一级] 小明的幸运数)
gesp(C++一级)（7）洛谷：B3863：[GESP202309 一级] 小明的幸运数
gesp(C一级)（7）洛谷：B3863：[GESP202309 一级] 小明的幸运数 题目描述 所有个位数为 k k k 的正整数，以及所有 k k k 的倍数，都被小明称为“ k k k 幸运数”。小明想知道正整数 L L L 和 R R R 之间&a…...
【数据库系统概论】数据库完整性与触发器--复习
在数据库系统概论中，数据库完整性是指确保数据库中数据的准确性、一致性和有效性的一组规则和约束。数据库完整性主要包括实体完整性、参照完整性和用户定义完整性。以下是详细的复习内容： 1. 数据库完整性概述 数据库完整性是指一组规则，这…...
【YOLOv8模型网络结构图理解】
YOLOv8模型网络结构图理解 1 YOLOv8的yaml配置文件2 YOLOv8网络结构2.1 Conv2.2 C3与C2f2.3 SPPF2.4 Upsample2.5 Detect层 1 YOLOv8的yaml配置文件 YOLOv8的配置文件定义了模型的关键参数和结构，包括类别数、模型尺寸、骨干（backbone）和头部…...
使用 commitlint 和 husky 检查提交描述是否符合规范要求
在上一小节中，我们了解了 Git hooks 的概念，那么接下来我们就使用 Git hooks 来去校验我们的提交信息。 要完成这么个目标，那么我们需要使用两个工具： 注意：npm 需要在 7.x 以上版本。 1. commitlint 用于检查提交信…...
QT集成IntelRealSense双目摄像头3，3D显示
前两篇文章，介绍了如何继承intel realsense相机和opengl。 这里介绍如何给深度数据和色彩数据一块显示到opengl里面。 首先，需要了解深度数据和彩色数据是如何存储的。先说彩色数据。彩色图像一般都是RGB，也就是每个像素有三个字节…...
Vue 中el-table-column 进行循环，页面没渲染成功
文章目录 前言效果图代码示例可能出现的问题及原因解决思路 前言 实现效果：el-table-column 进行循环，使之代码简化 遇到的问题： data进行默认赋值，操作列的删除都可以出来，其他表格里面的数据没出来 效果图 示例&am…...
渗透测试-非寻常漏洞案例
声明 本文章所分享内容仅用于网络安全技术讨论，切勿用于违法途径，所有渗透都需获取授权，违者后果自行承担，与本号及作者无关，请谨记守法. 此文章不允许未经授权转发至除先知社区以外的其它平台！࿰…...
Spring Boot 实战篇（四）：实现用户登录与注册功能
目录 Spring Boot 实战篇（四）：实现用户登录与注册功能 一、用户注册功能 （一）前端页面设计（简要提及） （二）后端实现 二、用户登录功能 （一）…...
VScode SSH 错误：Got bad result from install script 解決
之前vscode好好的，某天突然连接报错如下 尝试1. 服务器没有断开,ssh可以正常连接 2. 用管理员权限运行vscode，无效 3. 删除服务器上的~/.vscode-server 文件夹，无效 试过很多后，原来很可能是前一天anaconda卸载导致注册表项 步…...
openGauss与GaussDB系统架构对比
openGauss与GaussDB系统架构对比 系统架构对比openGauss架构GaussDB架构 GaussDB集群管理组件 系统架构对比 openGauss架构 openGauss是集中式数据库系统，业务数据存储在单个物理节点上，数据访问任务被推送到服务节点执行，通过服务器的高并…...
【ArcGISPro/GeoScenePro】检查并处理高程数据
数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 数字高程模型 (DEM) 是一种栅格，可显示地面或地形的高程。 数字表面模型 (DSM) 是另一种高程栅格，可显示表面的高度，例如建筑物或树冠的顶部。 您需要准备 DEM 和 DSM 以供分析…...
WebRTC的三大线程
WebRTC中的三个主要线程： signaling_thread，信号线程：用于与应用层交互worker_thread，工作线程（最核心）：负责内部逻辑处理network_thread，网络线程：负责网络数据包的收发…...
HTML-文本标签
历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。 1.<div> <div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没…...
C# 在PDF中添加和删除水印注释 （Watermark Annotation）
目录 使用工具 C# 在PDF文档中添加水印注释 C# 在PDF文档中删除水印注释 PDF中的水印注释是一种独特的注释类型，它通常以透明的文本或图片形式叠加在页面内容之上，为文档添加标识或信息提示。与传统的静态水印不同，水印注释并不会永久嵌入…...
Unity2022接入Google广告与支付SDK、导出工程到Android Studio使用JDK17进行打包完整流程与过程中的相关错误及处理经验总结
注：因为本人也是第一次接入广告与支付SDK相关的操作，网上也查了很多教程，很多也都是只言片语或者缺少一些关键步骤的说明，导致本人也是花了很多时间与精力踩了很多的坑才搞定，发出来也是希望能帮助到其他人在遇到相似问…...
docker部署项目
docker部署项目 （加载tar包：docker image load -i mysql.tar） 一、jdk环境配置 1.jdk下载地址 --Java Archive | Oracle 中国 --选择好版本进入 --下载Linux x64 Compressed Archive的链接 2.解压 --创建文件夹：mkdir /ro…...