【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语言的强大功能和鸿蒙平台提供的丰富组件库，开发者可以构建出流畅、响应迅速且用户体验优异的应用程序。随着鸿蒙系统的不断成熟和生态系统的扩展，掌握这些基础开发技能对于任何希望在鸿蒙平台上构建应用的开发者来说都是至关重要的。

代码展示

html 复制代码

@Entry
@Component
struct Index {
  @State
  num:number=5
  build() {
    // 需求：
    // 购物车商品数量大于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)
  }
}