当前位置: 首页 > news >正文

【HarmonyOS NEXT星河版开发学习】小型测试案例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)}
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Ubantu设置国内镜像(阿里云、华为云)
  • 基于Jeecgboot3.6.3的vue3版本的流程中仿钉钉流程的鼠标拖动功能支持
  • 多模态大模型intern-vl 1.5 论文解读:How Far Are We to GPT-4V?
  • 代码随想录第二十四天|动态规划(8)
  • C#:基本语法
  • 操作ArkTS页面跳转及路由相关心得
  • 矩阵:消除冗余
  • 逻辑数仓:助企业高效、低成本、轻量级整合全域数据
  • 【MySQL】执行DDL选择Online DDL还是PT-OSC?
  • [BSidesCF 2019]Kookie1
  • 算法笔记|Day20回溯算法II
  • Jenkins部署java项目
  • JAVA集中学习第四周学习记录(三)
  • 测试用例除了覆盖需求,还需要通过什么方式保证测试?
  • 深入理解和应用RabbitMQ的Work Queues模型
  • (三)从jvm层面了解线程的启动和停止
  • create-react-app项目添加less配置
  • ES6简单总结(搭配简单的讲解和小案例)
  • ES6之路之模块详解
  • golang中接口赋值与方法集
  • LeetCode18.四数之和 JavaScript
  • mysql 数据库四种事务隔离级别
  • TypeScript迭代器
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 从零开始在ubuntu上搭建node开发环境
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 如何优雅地使用 Sublime Text
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • LIGO、Virgo第三轮探测告捷,同时探测到一对黑洞合并产生的引力波事件 ...
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • !!java web学习笔记(一到五)
  • #include到底该写在哪
  • $(function(){})与(function($){....})(jQuery)的区别
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (day 12)JavaScript学习笔记(数组3)
  • (day18) leetcode 204.计数质数
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (Java入门)抽象类,接口,内部类
  • (Oracle)SQL优化技巧(一):分页查询
  • (windows2012共享文件夹和防火墙设置
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (更新)A股上市公司华证ESG评级得分稳健性校验ESG得分年均值中位数(2009-2023年.12)
  • (图文详解)小程序AppID申请以及在Hbuilderx中运行
  • (转)c++ std::pair 与 std::make
  • .bat批处理(二):%0 %1——给批处理脚本传递参数
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET 8 跨平台高性能边缘采集网关
  • .NET CLR基本术语
  • .net core 微服务_.NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端
  • .Net Core 中间件验签
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth
  • .NET序列化 serializable,反序列化