HarmonyOS 开发基础（十）if...else

最新推荐文章于 2024-07-17 10:20:55 发布

宸子涵

最新推荐文章于 2024-07-17 10:20:55 发布

阅读量387

点赞数 8

分类专栏： HarmonyOS 文章标签： HarmonyOS 华为鸿蒙系统 ArkTS ArkUI

本文链接：https://blog.csdn.net/qq_47938951/article/details/135551136

版权

HarmonyOS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HarmonyOS 开发基础（十）if…else

一、基础使用

如图所示：

在这里插入图片描述

@Entry
@Component
struct Index {
  // State：标记为状态变量，值发生改变时会触发 UI 刷新
  @State num: number = 0
  build() {
    // 如果偶数，则高亮偶数块，如果是奇数，则高亮奇数块
    Column() {
      Row() {
        // if：条件渲染，如果条件为真，则进入 if 代码里面，否则进入 else 代码里面
        if (this.num % 2 == 0) {
          Row() {
            Text('单数展示')
              .fontColor('#fff')
          }
          .width(100)
          .height(100)
          .justifyContent(FlexAlign.Center)
          .borderRadius(10)
          .backgroundColor('#e5e5e5')
          Row() {
            Text('偶数展示')
              .fontColor('#fff')
          }
          .width(100)
          .height(100)
          .justifyContent(FlexAlign.Center)
          .borderRadius(10)
          .backgroundColor('#007eff')
        // else：条件不成立进入
        } else {
          Row() {
            Text('单数展示')
              .fontColor('#fff')
          }
          .width(100)
          .height(100)
          .justifyContent(FlexAlign.Center)
          .borderRadius(10)
          .backgroundColor('#007eff')
          Row() {
            Text('偶数展示')
              .fontColor('#fff')
          }
          .width(100)
          .height(100)
          .justifyContent(FlexAlign.Center)
          .borderRadius(10)
          .backgroundColor('#e5e5e5')
        }


      }
        .width('100%')
        .padding(20)
        .justifyContent(FlexAlign.SpaceBetween)


      // 奇偶数判断，奇数展示奇数，偶数展示偶数
      // if：条件渲染，如果条件为真，则进入 if 代码里面，否则进入 else 代码里面
      Row() {
        if(this.num % 2 == 0) {
          Text('偶数：')
        } else {
          Text('奇数：')
        }
        Text(this.num.toString())
      }
      Row() {
        Button('加一')
          // onClick：按钮点击事件，点击一次进行加一
          .onClick(() => {
            this.num += 1
          })
        Button('减一')
          // onClick：按钮点击事件，点击一次进行减一
          .onClick(() => {
            this.num -= 1
          })
      }
        .width('100%')
        .padding(20)
        .justifyContent(FlexAlign.SpaceAround)
    }
      .width('100%')
  }
}