【HarmonyOS NEXT星河版开发学习】小型测试案例14-京东加购

个人主页→VON

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

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

 

 前言

该案例主要是根据条件来进行渲染，不同的条件下所显示的界面是不同的。在库存小于1的时候显示的是查看类似商品，库存大于1的时候才可以购买。

构建思路

先利用position定位各各组件的位置

 再定义库存的数量

根据数量的不同进行不同程度的渲染 

 

 

界面效果讲解

 最右侧的箭头位置要添加背景色和内边距，还要有圆角属性（圆角为宽度的一半）

 

下方的这三个信息是共有的，采用了三个Column组件，主轴对齐方式为 

.justifyContent(FlexAlign.SpaceBetween)

因为条件不同时的按钮也会不同，为了更好的去适应，所以采用了SpaceBetween

 

 这三个按钮并没有过多的渲染，主要是查看类似商品按钮左右要适当的增加内边距，为了更加的美观

知识点概述

条件语句的类型

• 基础语法：鸿蒙开发中的条件语句主要包括if、else if和else这几个基本结构。这种条件控制机制使得开发者可以根据不同的逻辑条件来执行特定的代码段。例如，当某个逻辑条件为真时，执行对应的一组语句；如果不满足该条件，则可以执行另一组语句或者什么都不做。
• 类型转换：在ArkTS中，条件表达式可以是任何类型，而对于非布尔类型的条件表达式，会进行隐式类型转换。例如，一个字符串或数值表达式可以直接作为if语句的条件，根据其转换为布尔值的真假来执行相应的代码块。

if 语句

• 用于执行一个或多个语句，如果指定的条件为真（true）则执行。

if (condition) {
    // 执行代码块
}

if...else 语句

• 当条件为真时执行一个代码块，否则执行另一个代码块。

if (condition1) {
    // condition1 为真时执行的代码块
} else if (condition2) {
    // condition2 为真时执行的代码块
} else {
    // 其他情况执行的代码块
}

 

if...else if...else 语句

• 可以测试多个条件，并且只有第一个为真的条件块会被执行。

if (condition1) {
    // condition1 为真时执行的代码块
} else if (condition2) {
    // condition2 为真时执行的代码块
} else {
    // 其他情况执行的代码块
}

 

switch 语句

• 用于测试不同的case标签，每个case标签有一个相关的值。

switch (expression) {
    case value1:
        // 表达式的值等于value1时执行的代码块
        break;
    case value2:
        // 表达式的值等于value2时执行的代码块
        break;
    default:
        // 表达式的值与任何case都不匹配时执行的代码块
}

 

三元运算符（条件运算符）

• 是一个简化的if...else结构。

let result = (condition) ? valueIfTrue : valueIfFalse;

条件渲染的机制

• 页面构建：在应用的初始构建阶段，条件语句会评估当前的应用状态，然后构建适用分支下的UI组件。如果没有任何适用分支，则不会构建任何内容。
• 状态更新：当应用状态发生变化时，条件语句会重新评估，并根据新的状态值删除不适用分支的组件，同时构建新的适用分支组件。这样确保了UI界面与应用状态同步更新。

@State装饰器

• 状态管理：条件语句还可以结合ArkTS的@State装饰器使用，以更高效地管理组件内部的状态。这种用法不仅保持了类型安全，而且使得组件能够在状态变更时维持高效的状态管理。
• 应用场景：例如，一个组件可能有一个标记显示状态的布尔值@State isShow，并通过条件语句基于这个状态值来决定是否展示某个界面元素。

条件渲染适用场景

• 性能优化：在应用冷启动阶段，如果某些组件初始不需要显示，建议使用条件渲染替代显隐控制，以减少渲染时间，加快启动速度。这在组件初始加载时并不可见的场景下尤其有效。
• 内存管理：对于不会频繁切换显示和隐藏的组件，条件渲染可以通过即时销毁不需要显示的组件来节省内存，特别适合于那些大部分时候不需要显示的组件。
• 组件复用：如果组件子树结构复杂，且反复切换条件渲染的控制分支，条件渲染配合组件复用机制可以提升应用性能。这种方式下，组件的复用可以显著减少创建和销毁的开销。

显隐控制的适用场景

• 频繁切换：如果组件需要频繁地在显示和隐藏之间切换，使用显隐控制更为合适。这样可以避免组件的频繁创建与销毁，从而提升性能。
• 布局占位：当组件隐藏后需要保持其在页面布局中的位置时，显隐控制更加适用。这是因为显隐控制只是改变了组件的可视状态，而非完全移除组件。

代码展示

// 京东加购
// 需求：
// 有库存显示加购
// 无库存显示查看类似商品
@Entry
@Component
struct Index {
  @State count:number=1
  build() {
    Column(){
      if(this.count<1){
        // 提示信息
        Row(){
          Row(){
            Image($r('app.media.jdjg_ts'))
              .width(20)
              .margin({left:10,right:5})
            Text('该商品暂时没有库存，看看相识商品吧')
              .fontSize(12)
              .fontColor('#b69671')
          }
          Image($r('app.media.jdjg_jt'))
            .width(16)
            .backgroundColor('#dfddc2')
            .padding(3)
            .fillColor('#b18b6b')
            .borderRadius(8)
            .position({x:'90%',y:'30%'})
        }
        .width('100%')
        .height(40)
        .backgroundColor('#fdf9da')
        .position({x:0,y:'87%'})
      }
      //下方信息
      Row(){
        Column({space:5}){
          Image($r('app.media.jdjg_dp'))
            .width(20)
          Text('店铺')
            .fontSize(12)
        }
        Column({space:5}){
          Image($r('app.media.jdjg_kf'))
            .width(20)
          Text('客服')
            .fontSize(12)
        }
        Column({space:5}){
          Image($r('app.media.jdjg_gwc'))
            .width(20)
          Text('购物车')
            .fontSize(12)
        }
        if(this.count>=1){
          // 加入购物车按钮
          Button('加入购物车')
            .backgroundColor('#ffc73e')
          // 立即购买按钮
          Button('立即购买')
            .backgroundColor(Color.Red)
        }
        else{
          // 加入购物车按钮
          Button('查看类似商品')
            .padding({left:40,right:40})
            .backgroundColor('#ffc73e')
        }
      }
      .position({x:0,y:'92%'})
      .padding(10)
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
  }
}