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

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

在这里插入图片描述


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

一、功能说明

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

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

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

三、项目结构
  • 项目名称SimpleShoppingCart
  • 自定义组件名称ShoppingCartPage
  • 代码文件ProductInterface.etsShoppingCartPage.etsIndex.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 接口定义商品的结构,包含 nameprice 两个属性。
  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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

json的作用?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,具有简洁、易读、易于解析和生成等特点,在前后端数据交互、配置文件、数据存储等多个领域发挥着重要作用,以下是具体介绍: JSON 的作用 数据…

PlantUML 入门使用指南

PlantUML 入门使用指南 一、PlantUML介绍二、PlantUML的用途三、PlantUML的语法及示例3.1 用例图(Use Case Diagram)3.2 类图(Class Diagram)3.3 对象图(Object Diagram)3.4 序列图(Sequence Di…

springboot maven 构建 建议使用 --release 21 而不是 -source 21 -target 21,因为它会自动设置系统模块的位置

使用 --release 选项代替 -source 和 -target 是一种更安全、更兼容的方式,特别是在构建使用较新版本 JDK 的项目时。以下是详细解释和建议: 1. 为什么推荐使用 --release 问题点: 使用 -source 和 -target 标志时,仅设置了代码的语言级别和字节码目标版本,但编译器仍可…

快速下载pytorch_geometric

注意:千万不要一上去就使用pip去安装!!! 1.找到GitHub手动下载所需依赖: https://github.com/pyg-team/pytorch_geometric 进入网址后点击此处: 2.点击here进去后寻找自己的torch版本(我的是torch2.1.2的…

微服务-1 认识微服务

目录​​​​​​​ 1 认识微服务 1.1 单体架构 1.2 微服务 1.3 SpringCloud 2 服务拆分原则 2.1 什么时候拆 2.2 怎么拆 2.3 服务调用 3. 服务注册与发现 3.1 注册中心原理 3.2 Nacos注册中心 3.3 服务注册 3.3.1 添加依赖 3.3.2 配置Nacos 3.3.3 启动服务实例 …

GNN图神经网络模型详解与代码复现

图结构数据 图结构数据是一种 非线性数据结构 ,由顶点和边组成,能够灵活表达复杂的关系网络。常见的图结构包括: 类型 特点 无向图 边没有方向 有向图 边有明确的方向 加权图 边附加权重信息 层次图 节点间存在层次关系 这种高度灵活的数据组织方式使得图结构特别适合模拟各…

QT-【常用容器类】-QList类 QLinkedList类

QList 和 QLinkedList 是 Qt 框架中提供的两个重要容器类,用于存储和管理一组数据。它们各自具有不同的特点和优缺点,适用于不同的场景。 1. QList 类概述 QList 是一个动态数组类,提供了对元素的快速随机访问。它的实现类似于 C 标准库中的…

SQLAlchemy示例(连接数据库插入表数据)

背景需求 连接数据库,插入表中一些数据。 其用户是新建用户,所以只能插入,不能更新。 再次输入数据则使用更新数据语法,这个没调试。 #! /usr/bin/env python # -*- coding: utf-8 -*-from sqlalchemy import create_engine, …

低代码开发中 DDD 领域驱动的页面权限控制

在低代码开发的领域中,应用安全与灵活性是两大关键考量因素。领域驱动设计(DDD)作为一种在软件设计领域广泛应用且颇具影响力的方法论,正逐渐在低代码开发的页面权限控制方面展现出其独特的价值与潜力。本文旨在客观地探讨如何借助…

找到一个linux静态库动态库的好资料.3

# 正文 继续整理从这个页面学到的东西:https://tldp.org/HOWTO/Program-Library-HOWTO。 之前的在这里:找到一个linux静态库动态库的好资料.0找到一个linux静态库动态库的好资料.1找到一个linux静态库动态库的好资料.2 这一篇继续看这个: https://tldp…

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之6

本文提要 一些补充 在为前端和后端 锁定的两个中心词“概念”(命题“作文”的 程序 公共逻辑语言 )和“描述”(谓词“描述” 的 自然 描述语言)的基础上 ,暂时将中端的中心词 锁定在“环境” (情境 “意义…

uniapp小程序实现弹幕不重叠

uniapp小程序实现弹幕不重叠 1、在父组件中引入弹幕组件 <template><!-- 弹幕 --><barrage ref"barrage" class"barrage-content" reloadDanmu"reloadDanmu"></barrage> </template> <script>import barr…

区块链平台安全属性解释

区块链平台安全属性解释 双向认证 解释:双向认证是指在通信过程中,**通信双方都需要对对方的身份进行验证,确保对方是合法的、可信任的实体。**只有双方身份都得到确认后,通信才会被允许进行,从而防止非法用户的接入和数据的窃取或篡改。举例:在基于区块链和联邦学习的数…

nginx 基于 geoip 模块限制地区访问

1、安装 geoip 库 [rootVM-0-15-centos ~]# yum -y install geoip geoip-devel 2、下载并安装 MaxMind 的免费 GeoIP 数据库。这里我选择下载 GeoLite2 数据库&#xff0c;适用于大多数应用。 访问 maxmind 官网&#xff08;https://www.maxmind.com/&#xff09;&#xff0c…

openfeign-一些配置

之前整理过一篇 openfeign的快速使用。openfeign简化服务间调用-笔记-CSDN博客 今天补充一下一些个性化配置。 一 日志&#xff1a; 默认的openfeign不输出日志&#xff0c;想看日志需要单独配置下。 日志级别 public static enum Level {NONE,BASIC,HEADERS,FULL;private…

【回溯】LeetCode经典题目总结:组合、排列、子集、分割、N皇后、单词搜索

回溯 组合问题组合总和全排列子集分割回文串N皇后电话号码的字母组合单词搜索括号生成 组合问题 给定两个整数 n 和 k&#xff0c;返回 1 … n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 树形结构&#xff1…

HEIC 是什么图片格式?如何把 iPhone 中的 HEIC 转为 JPG?

在 iPhone 拍摄照片时&#xff0c;默认的图片格式为 HEIC。虽然 HEIC 格式具有高压缩比、高画质等优点&#xff0c;但在某些设备或软件上可能存在兼容性问题。因此&#xff0c;将 HEIC 格式转换为更为通用的 JPG 格式就显得很有必要。本教程将介绍如何使用简鹿格式工厂&#xf…

【实战示例】面向对象的需求建模

前言 博主准备写一个以面向对象为核心思想的软件需求建模、领域建模的系列&#xff0c;总结一整套可落地的DDD的打法&#xff0c;前面几篇文章论述了如何进行面向对象的需求建模&#xff0c;本文将以一个简单的购物商城的需求来演示如何进行面向对象的需求建模。 面向对象的需…

04-微服务02

我们将黑马商城拆分为5个微服务&#xff1a; 用户服务 商品服务 购物车服务 交易服务 支付服务 由于每个微服务都有不同的地址或端口&#xff0c;相信大家在与前端联调的时候发现了一些问题&#xff1a; 请求不同数据时要访问不同的入口&#xff0c;需要维护多个入口地址…

【MyBatis 核心工作机制】注解式开发与动态代理原理

有很多朋友可能已经在开发中熟练使用 MyBatis 或者刚开始学习 MyBatis&#xff0c;对于它的一些工作机制不太了解。“咦&#xff0c;怎么写几个注解&#xff0c;写几个配置文件&#xff0c;就能实现这些效果呢&#xff0c;好神奇呀&#xff01;”当你看完这篇博客之后&#xf…