鸿蒙ArkTS小案例-购物车

news2024/12/23 23:48:43

最近用鸿蒙的ArkTS做了一个购物车的小案例,在这里分享一下,该购物车已实现如下功能:

1. 购物车商品数量支持1个或者多个

2. 勾选1个或者多个商品后,底部可以动态计算出购买总数量和总价格

3. 同时,可以对购买商品的数量进行增加和减少,也可以实时算出购买总数量和总价格

3. 支持全选,也可以实时算出购买总数量和总价格

最终成果页面如下所示:

页面源码如下:

import { cartData, CartItem, retSumPrice } from '../../model/Cart';
import { CartItemView } from '../../viewmodel/CartItemView';

/**
 * Author: 波波老师(weixin:javabobo0513)
 * Desc: 购物车页面
 */
@Entry
@Component
struct ShopCarPlus {
  @State sumCount: number = 0; //商品总数量
  @State sumPrice: number = 0; //商品总价格
  @State arrCartData: Array<CartItem> = cartData.getCartData(); //购物车商品数据

  build() {
    Column() {
      Text('购物车')
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .height(50)
      List() {
        ListItem() {
          Column({ space: 10 }) {
            ForEach(this.arrCartData, (cart: CartItem) => {
              CartItemView({
                cartItem: cart
              });
            })
          }
          .width('96%')
          .justifyContent(FlexAlign.Start)
        }
      }
      .alignListItem(ListItemAlign.Center) //设置子元素居中显示
      .height('85%') //设置List高度

      // 占位符,用于在布局中创建空间
      Blank()

      // 结算行的布局
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.NoWrap,
        justifyContent: FlexAlign.Center,
        alignItems: ItemAlign.Center
      }) {
        // 全选复选框和文本
        Row({ space: 5 }) {
          CheckboxGroup({ group: 'cartGroup' })
            .width(16)
            //onChange:CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调
            .onChange(result => {
              this.sumCount = result.name.length;
              console.log(JSON.stringify(result))
              //result.name:群组内,被选中的 Checkbox 的name名称
              this.sumPrice = retSumPrice(this.arrCartData, result.name)
            })
          Text('全选')
            .fontSize(16)
        }
        .width('22%')

        // 结算信息
        Row() {
          // 显示已选商品数量和总金额
          Text(`已选 ${this.sumCount} 件`)
            .fontColor(Color.Gray)
            .fontSize(14)
          Text('合计: ')
            .fontSize(14)
          Text(`¥ ${this.sumPrice.toFixed(2)}`)
            .fontColor('#e6f51905')
            .fontSize(20)
        }
        .layoutWeight(1)

        // 结算按钮
        Button('结算')
          .width(70)
          .height(40)
          .backgroundColor('#ffff4801')
      }
      .padding(5)
      .height(60)
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius({
        topLeft: 25,
        topRight: 25
      })

    }
    .backgroundColor($r('app.color.page_bg')) // 页面背景颜色
    .width('100%')
    .height('100%')
  }
}

源码中涉及到的商品图片可以自行替换,希望对大家有所帮助

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

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

相关文章

SpringBoot对接Midjourney Api

提示&#xff1a;SpringBoot对接Midjourney Api 文章目录 目录 文章目录 后端代码 导包 controller层 工具类层 前端代码 申请API 测试结果 后端代码 导包 <!--添加hutool的依赖--><dependency><groupId>cn.hutool</groupId><artifactId&g…

IoT客户端+联邦学习微调大模型

大型模型的训练涉及到微调&#xff0c;微调则面临着高质量数据的稀缺性。与基于集中式数据中心的解决方案相比&#xff0c;物联网-IoT中大型模型的更新面临着分布式客户端私有且异构数据的协调挑战。为了解决这一挑战&#xff0c;作者提出了KOALA来推动物联网中大模型的训练。由…

单线程Redis:Redis为什么这么快

1 Redis是不是单线程 Redis 使用后台线程执行耗时的 I/O 操作&#xff0c;以免阻塞主线程 bio_close_file&#xff1a;后台 I/O 线程之一&#xff0c;异步关闭文件 bio_aof_fsync&#xff1a;后台 I/O 线程之一&#xff0c;异步地将 AOF&#xff08;Append Only File&#xff…

C++系列-STL容器之vector

STL概念 vector基本概念vector与数组的区别vector容器的特点动态大小连续存储自动扩容尾部操作高效 vector动态扩展的含义vector常用的接口示意 vector的构造函数vector赋值操作重载赋值assign赋值 vector的容量和大小vector的插入和删除vector数据存取vector互换容器vector互换…

音视频入门基础:WAV专题(7)——FFmpeg源码中计算WAV音频文件每个packet的size值的实现

一、引言 从文章《音视频入门基础&#xff1a;WAV专题&#xff08;6&#xff09;——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道&#xff0c;通过FFprobe命令可以显示WAV音频文件每个packet&#xff08;也称为数据包或多媒体包&#xff09;的信息&#xff0…

VMware16安装包+详细安装教程

VMware Workstation Pro16.0安装 安装包下载&#xff1a; 通过百度网盘分享的文件&#xff1a;VMware16.0.rar 链接&#xff1a;https://pan.baidu.com/s/1ZSWns5kJYUmhpZFjuKXqrQ?pwdv7s2 提取码&#xff1a;v7s2右键解压之后的安装包【VMware-workstation-full-16.0.0-16…

FrameNet介绍——从同义词语义知识库到框架语义知识库

FrameNet 是一个为期三年的项目&#xff0c;获得了 NSF&#xff08;美国国家科学基金会&#xff09;的支持&#xff0c;专注于基于语料库的计算词典编纂。 项目特点 FrameNet承诺使用语料库证据&#xff08;corpus evidence&#xff09;来进行语义和句法的概括&#xff1b; 并…

网络基础-实现在Windows系统下的socket环境地址通信

实现客户端和服务端的数据交互 1.写所要实现功能的声明&#xff08;封装在tcpsocket.h文件&#xff09; #ifndef TCPSOCKET_H #define TCPSOCKET_H//在Windows下进行网络编程&#xff0c;需要引入Windows的socket库 #include <winsock2.h> //做一些预编译工作&#xff…

MyBatis结果集复杂映射超详细版(一对多关系映射)

目录 1.一对多关系映射 1.1创建两个表&#xff1a;goods表与goods_class表 1.2xml文件中两部分&#xff1a;与(存放SQL语句)1.3数据库中&#xff1a;测试SQL语句&#xff0c;涉及到的知识点&#xff1a;左连接 1.一对多关系映射 1.1创建两个表&#xff1a;goods表与goods_c…

C++对C的扩充(8.28)

1.使用C手动封装一个顺序表&#xff0c;包括成员数组1个&#xff0c;成员变量n个 代码&#xff1a; #include <iostream>using namespace std;//类型重命名 using datatype int; #define MAX 30struct seqList { private: //私有权限datatype *data; //相当于 …

【项目源码】终于有人将打字游戏和编程英语结合起来啦!编程初学者的福音

Hello&#xff01;各位彦祖&#xff0c;亦菲们&#xff01;又是美好的一天&#xff01;今天给大家分享一个Java项目源码&#xff1a;Java打字游戏项目源码&#xff01; 看到这里&#xff0c;你可能会说&#xff01; 一个破打字游戏有什么可神气的&#xff01;&#xff01;&…

【自由能系列(中级)】状态与动作的协同机制解析 ——从马尔可夫毯到大脑功能的全方位剖析

状态与动作的协同机制解析 ——从马尔可夫毯到大脑功能的全方位剖析 Synergistic Mechanism of States and Actions —— A Comprehensive Analysis from Markov Blanket to Brain Function 核心结论&#xff1a; 中文总结&#xff1a; 系统将状态划分为内部状态和隐藏或外…

Flutter中的Key

在Flutter 中&#xff0c;Key 是 几乎所有 widget 都具有的属性。为什么 widget 具有 Key 呢&#xff1f;Key的作用是什么&#xff1f; 什么是 Key Key是Widget、Element 和 SemanticNodes 的标识符。 Key 是Widget、Element 和 SemanticNodes的唯一标识。例如对于 Widget 在 …

MyBatis的学习————下篇

目录 一、动态SQL 简介 1、if标签 2、where标签 3、trim标签 4、choose、when、otherwise 5、foreach 5.1、批量删除 5.2、批量添加 6、sql标签 二、MyBatis的缓存 1、一级缓存 2、二级缓存 3、二级缓存的相关配置 4、MyBatis缓存查询的顺序 5、 第三方缓存EHCac…

如何在Windows 11上关闭无响应的应用程序?这里有详细步骤

序言 无响应的应用程序令人沮丧,但更糟糕的是这些应用程序拒绝关闭。如果你发现自己处于这种情况,我们有几种方法可以帮助你强制关闭Windows 11 PC上的这些应用程序。让我们找出可用的解决方案。 使用键盘快捷键结束程序 关闭无响应应用程序的最简单方法是使用Windows键盘…

DataWhale AI夏令营 2024大运河杯-数据开发应用创新赛-task2

DataWhale AI夏令营 2024大运河杯-数据开发应用创新赛 YOLO(You Only Look Once)上分心得分享 YOLO(You Only Look Once) YOLO算的上是近几年最火的目标检测模型了&#xff0c;被广泛的应用在工业、学术等领域。 YOLOv1&#xff08;You Only Look Once 第一版&#xff09;于 2…

基于麒麟信安操作系统的光伏发电功率预测系统完成大规模部署建设

麒麟信安操作系统&#xff0c;作为行业数智化建设的安全根基&#xff0c;为电力业务系统提供了稳定可靠的底层平台&#xff0c;在全球能源结构转型大潮中扮演着至关重要的角色。某光伏电站项目中&#xff0c;基于麒麟信安操作系统的光伏发电功率预测系统完成大规模部署建设&…

c#如何加密exe程序防止反编译附软件

1. 先说软件&#xff0c;使用的软件是Dotfuscator&#xff0c;下载地址如下&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/6f2e785c003f2. 软件使用方法&#xff0c;打开软件&#xff0c;选择Create New Project 3. 找到input&#xff0c;把你需要加密的文件导入 4.…

k8s项目的发布

目录 三种发布方式 1.蓝绿发布 2.金丝雀发布&#xff08;灰度发布&#xff09; 实验&#xff1a;k8s实现金丝雀发布 3.滚动发布&#xff08;默认形式&#xff09; 因为应用升级以及新旧业务切换&#xff0c;所以在这个过程当中如何保证对外的服务正常是一个非常重要的问题…

手把手教你如何使用Python连接MySQL数据

数据库编程是在应用程序中与数据库交互和管理数据的关键部分。MySQL是一种流行的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;在Python中进行MySQL数据库编程相对容易。 本文介绍如何使用Python进行MySQL数据库编程&#xff0c;包括连接数据库、执行SQL查询…