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

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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87