• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# if/else：条件渲染
2
3
4ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。
5
6> **说明：**
7>
8> 从API version 9开始，该接口支持在ArkTS卡片中使用。
9
10## 使用规则
11
12- 支持if、else和else if语句。
13
14- if、else if后跟随的条件语句可以使用状态变量。
15
16- 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
17
18- 条件渲染语句在涉及到组件的父子关系时是“透明”的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。
19
20- 每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。
21
22- 某些容器组件限制子组件的类型或数量，将条件渲染语句用于这些组件内时，这些限制将同样应用于条件渲染语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用条件渲染语句时，条件渲染语句内仅允许使用GridItem组件。
23
24
25## 更新机制
26
27当if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新，更新步骤如下：
28
291. 评估if和else if的状态判断条件，如果分支没有变化，请无需执行以下步骤。如果分支有变化，则执行2、3步骤：
30
312. 删除此前构建的所有子组件。
32
333. 执行新分支的构造函数，将获取到的组件添加到if父容器中。如果缺少适用的else分支，则不构建任何内容。
34
35条件可以包括Typescript表达式。对于构造函数中的表达式，此类表达式不得更改应用程序状态。
36
37
38## 使用场景
39
40
41### 使用if进行条件渲染
42
43
44```ts
45@Entry
46@Component
47struct ViewA {
48  @State count: number = 0;
49
50  build() {
51    Column() {
52      Text(`count=${this.count}`)
53
54      if (this.count > 0) {
55        Text(`count is positive`)
56          .fontColor(Color.Green)
57      }
58
59      Button('increase count')
60        .onClick(() => {
61          this.count++;
62        })
63
64      Button('decrease count')
65        .onClick(() => {
66          this.count--;
67        })
68    }
69  }
70}
71```
72
73if语句的每个分支都包含一个构建函数。此类构建函数必须创建一个或多个子组件。在初始渲染时，if语句会执行构建函数，并将生成的子组件添加到其父组件中。
74
75每当if或else if条件语句中使用的状态变量发生变化时，条件语句都会更新并重新评估新的条件值。如果条件值评估发生了变化，这意味着需要构建另一个条件分支。此时ArkUI框架将：
76
771. 删除所有以前渲染的（早期分支的）组件。
78
792. 执行新分支的构造函数，将生成的子组件添加到其父组件中。
80
81在以上示例中，如果count从0增加到1，那么if语句更新，条件count > 0将重新评估，评估结果将从false更改为true。因此，将执行条件为真分支的构造函数，创建一个Text组件，并将它添加到父组件Column中。如果后续count更改为0，则Text组件将从Column组件中删除。由于没有else分支，因此不会执行新的构造函数。
82
83
84### if ... else ...语句和子组件状态
85
86以下示例包含if ... else ...语句与拥有\@State装饰变量的子组件。
87
88
89```ts
90@Component
91struct CounterView {
92  @State counter: number = 0;
93  label: string = 'unknown';
94
95  build() {
96    Row() {
97      Text(`${this.label}`)
98      Button(`counter ${this.counter} +1`)
99        .onClick(() => {
100          this.counter += 1;
101        })
102    }
103  }
104}
105
106@Entry
107@Component
108struct MainView {
109  @State toggle: boolean = true;
110
111  build() {
112    Column() {
113      if (this.toggle) {
114        CounterView({ label: 'CounterView #positive' })
115      } else {
116        CounterView({ label: 'CounterView #negative' })
117      }
118      Button(`toggle ${this.toggle}`)
119        .onClick(() => {
120          this.toggle = !this.toggle;
121        })
122    }
123  }
124}
125```
126
127CounterView（label为 'CounterView \#positive'）子组件在初次渲染时创建。此子组件携带名为counter的状态变量。当修改CounterView.counter状态变量时，CounterView（label为 'CounterView \#positive'）子组件重新渲染时并保留状态变量值。当MainView.toggle状态变量的值更改为false时，MainView父组件内的if语句将更新，随后将删除CounterView（label为 'CounterView \#positive'）子组件。与此同时，将创建新的CounterView（label为 'CounterView \#negative'）实例。而它自己的counter状态变量设置为初始值0。
128
129> **说明：**
130>
131> CounterView（label为 'CounterView \#positive'）和CounterView（label为 'CounterView \#negative'）是同一自定义组件的两个不同实例。if分支的更改，不会更新现有子组件，也不会保留状态。
132
133以下示例展示了条件更改时，若需要保留counter值所做的修改。
134
135
136```
137@Component
138struct CounterView {
139  @Link counter: number;
140  label: string = 'unknown';
141
142  build() {
143    Row() {
144      Text(`${this.label}`)
145      Button(`counter ${this.counter} +1`)
146        .onClick(() => {
147          this.counter += 1;
148        })
149    }
150  }
151}
152
153@Entry
154@Component
155struct MainView {
156  @State toggle: boolean = true;
157  @State counter: number = 0;
158
159  build() {
160    Column() {
161      if (this.toggle) {
162        CounterView({ counter: $counter, label: 'CounterView #positive' })
163      } else {
164        CounterView({ counter: $counter, label: 'CounterView #negative' })
165      }
166      Button(`toggle ${this.toggle}`)
167        .onClick(() => {
168          this.toggle = !this.toggle;
169        })
170    }
171  }
172}
173```
174
175此处，\@State counter变量归父组件所有。因此，当CounterView组件实例被删除时，该变量不会被销毁。CounterView组件通过\@Link装饰器引用状态。状态必须从子级移动到其父级（或父级的父级），以避免在条件内容或重复内容被销毁时丢失状态。
176
177
178### 嵌套if语句
179
180条件语句的嵌套对父组件的相关规则没有影响。
181
182
183```ts
184@Entry
185@Component
186struct CompA {
187  @State toggle: boolean = false;
188  @State toggleColor: boolean = false;
189
190  build() {
191    Column() {
192      Text('Before')
193        .fontSize(15)
194      if (this.toggle) {
195        Text('Top True, positive 1 top')
196          .backgroundColor('#aaffaa').fontSize(20)
197        // 内部if语句
198        if (this.toggleColor) {
199          Text('Top True, Nested True, positive COLOR  Nested ')
200            .backgroundColor('#00aaaa').fontSize(15)
201        } else {
202          Text('Top True, Nested False, Negative COLOR  Nested ')
203            .backgroundColor('#aaaaff').fontSize(15)
204        }
205      } else {
206        Text('Top false, negative top level').fontSize(20)
207          .backgroundColor('#ffaaaa')
208        if (this.toggleColor) {
209          Text('positive COLOR  Nested ')
210            .backgroundColor('#00aaaa').fontSize(15)
211        } else {
212          Text('Negative COLOR  Nested ')
213            .backgroundColor('#aaaaff').fontSize(15)
214        }
215      }
216      Text('After')
217        .fontSize(15)
218      Button('Toggle Outer')
219        .onClick(() => {
220          this.toggle = !this.toggle;
221        })
222      Button('Toggle Inner')
223        .onClick(() => {
224          this.toggleColor = !this.toggleColor;
225        })
226    }
227  }
228}
229```
230