【HarmonyOS NEXT星河版开发学习】小型测试案例11-购物车数字框

news/2024/9/25 21:30:11/

个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面(暂未发布)

 

前言

经过一周的学习,我发现还是进行拆分讲解效果会比较好,因为鸿蒙和前端十分的相识。主要就是表达的方式不同罢了。我希望以这种方式讲解能够帮助到大家。

页面讲解

数量减少样式

数字以及加号效果展示 

 数字默认为5

 鼠标单击减号,数字会进行自减操作

 

因为是购物车中的数量,所以不能是负数

当数量减到0时,再减会弹出一个提示

 

鼠标单击加号的时候可以一直加 

 

知识点概述 

鸿蒙开发中的条件语句主要通过ArkTS语言实现,支持if、else和else if语句用于条件渲染。在鸿蒙应用开发中,条件语句的使用是基本且必不可少的编程构造之一。它们在处理逻辑判断、动态内容渲染以及交互反馈中起到了关键作用。鸿蒙系统利用ArkTS(一种基于TypeScript的超集)作为其主要的开发语言,它允许开发者使用声明式UI进行高效编码。

从条件渲染的角度考虑

ArkTS允许开发者根据不同的应用状态,利用if、else和else if语句来渲染对应的UI内容。这些控制结构使得开发者能够构建出动态响应用户互动和状态变化的界面。例如,一个典型的用例是根据用户的登录状态来显示或隐藏某些组件,或者根据某个条件的变化来切换不同组件的显示。

关于条件语句的更新机制

当if或else if后跟随的状态判断中使用的状态变量值发生变化时,条件渲染语句会重新评估这些条件,并相应地更新UI组件。具体来说,如果分支有变化,ArkUI框架将删除所有以前渲染的组件,并执行新分支的构造函数,将生成的子组件添加到父容器中。这个过程为应用提供了高度的动态性和响应性,确保用户界面与应用状态同步。

@State装饰器

除了基本的使用方法,条件语句还可以结合ArkTS的装饰器(如@State)使用,以管理组件内部的状态。这种用法使得组件能够在状态变更时保持类型安全和高效的状态管理。比如,一个组件可能包含一个标记显示状态的布尔值@State isShow,并通过条件语句基于这个状态值决定是否展示某个界面元素。

鸿蒙开发中的条件语句不仅是实现代码逻辑控制的基石,还是实现复杂用户界面交互和动态内容呈现的关键工具。通过合理运用if、else和else if语句,结合ArkTS语言的强大功能和鸿蒙平台提供的丰富组件库,开发者可以构建出流畅、响应迅速且用户体验优异的应用程序。随着鸿蒙系统的不断成熟和生态系统的扩展,掌握这些基础开发技能对于任何希望在鸿蒙平台上构建应用的开发者来说都是至关重要的。

代码展示

@Entry
@Component
struct Index {@Statenum:number=5build() {// 需求:// 购物车商品数量大于1可以单击‘-’按钮// 否则提示‘最小数量为1,不能再减了’Column(){Row(){Text('-').width(40).height(40).border({width:2,color:'#999',radius:{topLeft:3,topRight:3}}).textAlign(TextAlign.Center).onClick(()=>{if(this.num>=1){this.num--}else{AlertDialog.show({message:'最小值为1,不能再减了'})}})Text(this.num.toString()).width(40).height(40).border({width:{top:2,bottom:2},color:'#999'}).textAlign(TextAlign.Center)Text('+').width(40).height(40).border({width:2,color:'#999',radius:{topLeft:3,topRight:3}}).textAlign(TextAlign.Center).onClick(()=>{this.num++})}}.padding(20)}
}


http://www.ppmy.cn/news/1508720.html

相关文章

设计模式-单例设计模式

单例模式的设计和线程安全 单例模式是一种创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点。实现单例模式时,线程安全性是一个重要考虑因素,特别是在多线程环境中。 1. C11 之前的线程安全实现 在 C11 之前&#…

电商平台的推荐算法需要备案吗?

答案是肯定的! 政策要求: 根据我国《互联网信息服务算法推荐管理规定》(以下简称《规定》)第六条,具有舆论属性或社会动员能力的互联网信息服务,包括电商平台的推荐算法,需要进行备案。 电商平…

Openlayers6 图形绘制和修改功能(结合React)

Openlayers常用的API了解的差不多了,就开始进入实战了,首先从绘制基本的图形开始,这里主要介绍一下绘制圆形、矩形和多边形。 通过使用openlayers的ol.interaction.Draw和ol.interaction.Modify模块实现地图上绘制圆形、矩形、多边形并修改编…

C++ 函数语义学——inline 函数回顾和扩展

inline 函数回顾和扩展 inline 函数回顾和扩展 inline 函数回顾和扩展1. inline 函数回顾2. inline 扩展总结 1. inline 函数回顾 inline 函数即有优点又有缺点,优点是它的执行成本一般比常规的函数调用和函数返回所带来的成本低,提高了程序执行效率&am…

05_ Electron 自定义菜单、主进程与渲染进程通信

Electron 自定义菜单、主进程与渲染进程通信 一、定义顶部菜单二、Electron 自定义右键菜单1、使用 electron/remote 模块实现 三、 Electron 主进程和渲染进程通信场景1:渲染进程给主进程发送异步消息场景2:渲染进程给主进程发送异步消息,主…

链表 203.移除链表元素 虚拟头结点

普通方法 头节点要和其他节点分开考虑,因为头节点没有上一个节点,不能通过更改上一个结点的指针来达到删除节点的目的 所以要让下一个节点成为头节点,其余节点,通过更改上一个节点的next指针,指向next.next class S…

如何在 Windows 上设置 MacOS 云主机

在Windows上设置MacOS云主机实际上涉及在Windows环境中模拟或远程管理MacOS系统,因为直接在Windows上运行MacOS作为云主机的主操作系统是不可能的,因为MacOS是为苹果硬件设计的。不过,有几种方法可以实现类似的功能: 1. 使用虚拟机…

LVS理论知识

目录 1.描述以及工作原理 1.什么是LVS 2.LVS调度算法 1.静态调度算法 1.轮询RR 2.加权轮询WRR 3.目标地址hash---DH 4.源地址hash---SH 2.动态调度算法 1.LC最少连接 2.wlc加权最少连接 3.sed最少期望延迟 4.nq不排队调度算法 5.lblc基于本地最少连接 6.lnlcr带…