• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArkUI子系统Changelog
2
3## cl.arkui.1 Repeat virtualScroll模式下，key不变&item改变的数据不刷新
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11Repeat组件缓存复用能力优化。
12
13**变更影响**
14
15此变更涉及应用适配。
16
17- 变更前：key不变，item改变，界面立即触发刷新，数据改变。
18
19- 变更后：key不变，item改变，认为节点没有发生变化，界面不会立即触发刷新。
20
21eg. 运行下面的Demo示例，进入页面后，点击“click”按钮改变数组项的值。
22
23```ts
24@ObservedV2
25class RepeatData {
26  @Trace id: string;
27  @Trace msg: string;
28
29  constructor(id: string, msg: string) {
30    this.id = id;
31    this.msg = msg;
32  }
33}
34
35@Entry
36@ComponentV2
37struct RepeatRerender {
38  @Local dataArr: Array<RepeatData> = [];
39
40  aboutToAppear(): void {
41    for (let i = 0; i < 10; i++) {
42      this.dataArr.push(new RepeatData(`key${i}`, `data${i}`));
43    }
44  }
45
46  build() {
47    Column({ space: 20 }) {
48      List() {
49        Repeat<RepeatData>(this.dataArr)
50          .each((ri: RepeatItem<RepeatData>) => {
51            ListItem() {
52              Text(ri.item.msg).fontSize(30)
53            }
54          })
55          .key((item: RepeatData, index: number) => item.id)
56          .virtualScroll()
57      }
58      .cachedCount(2)
59      .width('100%')
60      .height('40%')
61      .border({ width: 1 })
62      .backgroundColor(0xFAEEE0)
63
64      Button('click').onClick(() => {
65        this.dataArr.splice(0, 1, new RepeatData('key0', 'new msg')); // 改变列表第一项的数据，保持key不变
66      })
67    }
68  }
69}
70```
71
72变更前：点击按钮后，节点数据发生变化，如下图所示。
73
74![img](../../figures/cl.arkui.1_rerender.gif)
75
76变更后：点击按钮后，节点数据没有变化。
77
78**起始API Level**
79
8012
81
82**变更发生版本**
83
84从OpenHarmony SDK 5.1.0.55开始。
85
86**适配指导**
87
88应用是否需要适配需要根据具体场景决定。如果开发者希望页面中的列表数据随着键值key的变化而变化（key不改变时页面不刷新），则无需更改`.key()`。
89
90如果希望数据发生变化就触发页面刷新，第一种方法（建议）：去掉Repeat的`.key()`函数；第二种方法：`.key()`的值的变化和数据变化保持一致。以上面的Demo为例，两种修改方案分别如下。
91
92第一种方案，去掉Repeat的`.key()`函数：
93
94```ts
95@ObservedV2
96class RepeatData {
97  @Trace id: string;
98  @Trace msg: string;
99
100  constructor(id: string, msg: string) {
101    this.id = id;
102    this.msg = msg;
103  }
104}
105
106@Entry
107@ComponentV2
108struct RepeatRerender {
109  @Local dataArr: Array<RepeatData> = [];
110
111  aboutToAppear(): void {
112    for (let i = 0; i < 10; i++) {
113      this.dataArr.push(new RepeatData(`key${i}`, `data${i}`));
114    }
115  }
116
117  build() {
118    Column({ space: 20 }) {
119      List() {
120        Repeat<RepeatData>(this.dataArr)
121          .each((ri: RepeatItem<RepeatData>) => {
122            ListItem() {
123              Text(ri.item.msg).fontSize(30)
124            }
125          })
126          .virtualScroll() // 删除.key()函数
127      }
128      .cachedCount(2)
129      .width('100%')
130      .height('40%')
131      .border({ width: 1 })
132      .backgroundColor(0xFAEEE0)
133
134      Button('click').onClick(() => {
135        this.dataArr.splice(0, 1, new RepeatData('key0', 'new msg')); // 改变列表第一项的数据，保持key不变
136      })
137    }
138  }
139}
140```
141
142第二种方案，修改`.key()`，使得`.key()`的值的变化和数据变化保持一致：
143
144```ts
145@ObservedV2
146class RepeatData {
147  @Trace id: string;
148  @Trace msg: string;
149
150  constructor(id: string, msg: string) {
151    this.id = id;
152    this.msg = msg;
153  }
154}
155
156@Entry
157@ComponentV2
158struct RepeatRerender {
159  @Local dataArr: Array<RepeatData> = [];
160
161  aboutToAppear(): void {
162    for (let i = 0; i < 10; i++) {
163      this.dataArr.push(new RepeatData(`key${i}`, `data${i}`));
164    }
165  }
166
167  build() {
168    Column({ space: 20 }) {
169      List() {
170        Repeat<RepeatData>(this.dataArr)
171          .each((ri: RepeatItem<RepeatData>) => {
172            ListItem() {
173              Text(ri.item.msg).fontSize(30)
174            }
175          })
176          .key((item: RepeatData, index: number) => item.msg) // .key()的值的变化和数据变化保持一致，数据改变时key也会改变
177          .virtualScroll()
178      }
179      .cachedCount(2)
180      .width('100%')
181      .height('40%')
182      .border({ width: 1 })
183      .backgroundColor(0xFAEEE0)
184
185      Button('click').onClick(() => {
186        this.dataArr.splice(0, 1, new RepeatData('key0', 'new msg')); // 改变列表第一项的数据，保持key不变
187      })
188    }
189  }
190}
191```
192
193## cl.arkui.2 selectDialog未选中radio样式变更
194
195**访问级别**
196
197公开接口
198
199**变更原因**
200
201弹窗内容风格优化，增强用户体验。
202
203**变更影响**
204
205此变更不涉及应用适配。
206
207变更点1：selectDialog未选中radio样式变更。
208
209| 变更前                                                                                       | 变更后                                                                        |
210|-------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
211| selectDialog未选中时的radio为显示非高亮状态。<br>  ![变更前](figures/selectDialog/selectDialog_before.png) | selectDialog未选中时的radio不显示。<br>![变更后](figures/selectDialog/selectDialog_after.png) |
212
213
214**起始API Level**
215
216API 11
217
218**变更发生版本**
219
220从OpenHarmony SDK 5.1.0.55开始。
221
222**变更的接口/组件**
223
224advancedDialog.selectDialog
225
226**适配指导**
227
228默认行为变更，无需适配。系统弹窗默认规格优化演进，若开发者有其他布局、样式诉求，建议使用CustomDialog自定义实现。
229
230## cl.arkui.3 Navigation工具栏文本样式变更
231
232**访问级别**
233
234公开接口
235
236**变更原因**
237
238UX规范变更。
239
240**变更影响**
241
242此变更不涉及应用适配。
243
244- 变更前：Navigation工具栏文本最多显示两行，文本高度12_vp。
245
246- 变更后：Navigation工具栏文本最多显示一行，文本高度10_vp。
247
248|              | 变更前 | 变更后 |
249| ------------ | ------ | ------ |
250| 文本样式     | ![item_old](figures/item_old.jpg) | ![item_new](figures/item_new.jpg) |
251
252**起始API Level**
253
254Navigation组件toolbarConfiguration接口：起始支持版本为 API 10。
255
256NavDestination组件toolbarConfiguration接口：起始支持版本为 API 13。
257
258**变更发生版本**
259
260从OpenHarmony SDK 5.1.0.55开始。
261
262**变更的接口/组件**
263
264涉及组件： Navigation, NavDestination组件。
265
266涉及接口：
267
268Navigation组件：
269
270toolbarConfiguration(value: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
271
272NavDestination组件：
273
274toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
275
276**适配指导**
277
278默认效果变更，无需适配。
279
280## cl.arkui.4 Navigation工具栏高度变更
281
282**访问级别**
283
284公开接口
285
286**变更原因**
287
288UX规范变更。
289
290**变更影响**
291
292此变更不涉及应用适配。
293
294- 变更前：Navigation工具栏高度为56_vp。
295
296- 变更后：Navigation工具栏高度为48_vp。
297
298| | 变更前 | 变更后 |
299|---------|---------|---------|
300|工具栏高度| ![bar_old](figures/bar_old.jpg) | ![bar_new](figures/bar_new.jpg) |
301
302**起始API Level**
303
304Navigation组件toolbarConfiguration接口：起始支持版本为 API 10。
305
306NavDestination组件toolbarConfiguration接口：起始支持版本为 API 13。
307
308**变更发生版本**
309
310从OpenHarmony SDK 5.1.0.55开始。
311
312**变更的接口/组件**
313
314涉及组件： Navigation, NavDestination组件。
315
316涉及接口：
317
318Navigation组件：
319
320toolbarConfiguration(value: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
321
322NavDestination组件：
323
324toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
325
326**适配指导**
327
328默认效果变更，无需适配。
329
330## cl.arkui.5 Navigation工具栏聚焦、Hover态样式变更
331
332**访问级别**
333
334公开接口
335
336**变更原因**
337
338UX规范变更。
339
340**变更影响**
341
342此变更不涉及应用适配。
343
344- 变更前：Navigation工具栏聚焦/Hover态高度56.0_vp，长度随item数目自适应，Hover态圆角大小为8.0_vp。
345
346- 变更后：Navigation工具栏聚焦/Hover态高度44.0_vp，长度比原来减少4vp（比原来上下左右各增加2vp的padding），Hover态圆角大小为12.0_vp。
347
348| | 变更前 | 变更后 |
349|---------|---------|---------|
350|聚焦态| ![tab_old](figures/tab_old.jpg) | ![tab_new](figures/tab_new.jpg) |
351|Hover态| ![hovew_old](figures/hover_old.jpg) | ![hover_new](figures/hover_new.jpg) |
352
353**起始API Level**
354
355Navigation组件toolbarConfiguration接口：起始支持版本为 API 10。
356
357NavDestination组件toolbarConfiguration接口：起始支持版本为 API 13。
358
359**变更发生版本**
360
361从OpenHarmony SDK 5.1.0.55开始。
362
363**变更的接口/组件**
364
365涉及组件： Navigation, NavDestination组件。
366
367涉及接口：
368
369Navigation组件：
370
371toolbarConfiguration(value: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
372
373NavDestination组件：
374
375toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
376
377**适配指导**
378
379默认效果变更，无需适配。
380
381## cl.arkui.6 Navigation工具栏单个item上下边距变更
382
383**访问级别**
384
385公开接口
386
387**变更原因**
388
389UX规范变更。
390
391**变更影响**
392
393此变更不涉及应用适配。
394
395- 变更前：上边距8vp下边距10vp。
396
397- 变更后：上下边距都是6vp。
398
399| | 变更前 | 变更后 |
400|---------|---------|---------|
401|单个item上下边距| ![margin_old](figures/margin_old.jpg) | ![margin_new](figures/margin_new.jpg) |
402
403**起始API Level**
404
405Navigation组件toolbarConfiguration接口：起始支持版本为 API 10。
406
407NavDestination组件toolbarConfiguration接口：起始支持版本为 API 13。
408
409**变更发生版本**
410
411从OpenHarmony SDK 5.1.0.55开始。
412
413**变更的接口/组件**
414
415涉及组件： Navigation, NavDestination组件。
416
417涉及接口：
418
419Navigation组件：
420
421toolbarConfiguration(value: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
422
423NavDestination组件：
424
425toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
426
427**适配指导**
428
429默认效果变更，无需适配。
430
431## cl.arkui.7 Navigation工具栏选项取消按压态
432
433**访问级别**
434
435公开接口
436
437**变更原因**
438
439UX规范变更。
440
441**变更影响**
442
443此变更不涉及应用适配。
444
445- 变更前：工具栏选项具有按压态。
446
447- 变更后：工具栏选项取消按压态。
448
449| | 变更前 | 变更后 |
450|---------|---------|---------|
451|选项按压态| ![press_old](figures/press_old.jpg) | ![press_new](figures/press_new.jpg) |
452
453**起始API Level**
454
455Navigation组件toolbarConfiguration接口：起始支持版本为 API 10。
456
457NavDestination组件toolbarConfiguration接口：起始支持版本为 API 13。
458
459**变更发生版本**
460
461从OpenHarmony SDK 5.1.0.55开始。
462
463**变更的接口/组件**
464
465涉及组件： Navigation, NavDestination组件。
466
467涉及接口：
468
469Navigation组件：
470
471toolbarConfiguration(value: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
472
473NavDestination组件：
474
475toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
476
477**适配指导**
478
479默认效果变更，无需适配。
480
481## cl.arkui.8 修复blendMode接口离屏模式会影响组件设置的不透明度的问题
482
483**访问级别**
484
485公开接口
486
487**变更原因**
488
489blendMode离屏模式与不透明度属性（opacity）同时使用时，组件的不透明度并不等于设置的不透明度，效果异常。
490
491**变更影响**
492
493此变更涉及应用适配，仅针对组件设置了blendMode离屏模式且具有不透明度的场景。
494
495变更前：组件设置了blendMode离屏模式，同时设置了opacity不透明度 A，则组件实际不透明度为 A * A
496
497变更后：组件设置了blendMode离屏模式，同时设置了opacity不透明度 A，则组件实际不透明度为 A
498
499变更前后效果如下:
500
501|变更前|变更后|
502|--|--|
503|![](./figures/blendMode_before.png)|![](./figures/blendMode_after.png)|
504
505
506
507**起始API Level**
508
509API 11
510
511
512**变更发生版本**
513
514从 OpenHarmony SDK 5.1.0.55 开始。
515
516**变更的接口/组件**
517
518blendMode 接口
519
520**适配指导**
521
522如果开发者希望在同时使用blendMode离屏模式和opacity接口时保持组件的不透明度不变，则需要手动调整原本设定的不透明度。例如，在下方示例代码中，在 Stack()上额外设置.opacity(0.5)，以确保实际的透明度为 0.5 * 0.5。
523
524```ts
525@Entry
526@Component
527struct Index {
528  build() {
529    Column() {
530       Stack() {
531       }
532       .height('50%')
533       .width('50%')
534       .backgroundColor(0x0A59F7)
535       .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
536       .opacity(0.5)  // 变更后需要额外设置0.5的不透明度保证实际透明度为 0.5*0.5
537    }
538    .height('100%')
539    .width('100%')
540    .backgroundColor(0xFFFFFF)
541    .opacity(0.5)
542  }
543}
544```
545
546
547