1# ArkUI子系统Changelog
2
3## cl.arkui.1 Tabs组件的页签可滚动且为非子页签样式时增加页签默认切换动效
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11快速连续切换页签时,页签产生跳变现象,视觉效果不佳。
12
13**变更影响**
14
15该变更为兼容性变更。
16
17变更前:Tabs组件的barMode为BarMode.Scrollable,TabContent组件的tabBar为子页签样式时有默认切换动效,即切换页签后,选中页签执行动画平移至tabBar中间位置。但非子页签样式时无默认切换动效,即切换页签后,选中页签立即跳变至tabBar中间位置。
18
19变更后:Tabs组件的barMode为BarMode.Scrollable,TabContent组件的tabBar为任意页签样式时均有默认切换动效,切换动效的时长为Tabs组件的animationDuration属性值。
20
21| 变更前 | 变更后 |
22|---------|---------|
23| ![](figures/tabs_before.gif) | ![](figures/tabs_after.gif) |
24
25**起始API Level**
26
277
28
29**变更发生版本**
30
31从OpenHarmony SDK 5.0.0.36开始。
32
33**变更的接口/组件**
34
35Tabs组件
36
37**适配指导**
38
39若希望关闭页签的默认切换动效,可设置Tabs组件的animationDuration属性值为0,但同时TabContent页面的默认切换动效也会被关闭。示例代码如下:
40```ts
41@Entry
42@Component
43struct TabsSample {
44  @State currentIndex: number = 0;
45
46  @Builder TabBuilder(index: number, name: string) {
47    Text(name)
48      .fontColor(this.currentIndex === index ? Color.White : Color.Black)
49      .fontSize(this.currentIndex === index ? 18 : 16)
50      .fontWeight(this.currentIndex === index ? 500 : 400)
51      .textAlign(TextAlign.Center)
52      .width(100)
53      .height(48)
54      .margin({ left: 4, right: 4 })
55      .backgroundColor(this.currentIndex === index ? '#007DFF' : '#F1F3F5')
56      .borderRadius(24)
57  }
58
59  build() {
60    Column() {
61      Tabs({ index: this.currentIndex }) {
62        TabContent() {
63          Column().width('100%').height('100%').backgroundColor('#00CB87')
64        }.tabBar(this.TabBuilder(0, 'green'))
65
66        TabContent() {
67          Column().width('100%').height('100%').backgroundColor('#007DFF')
68        }.tabBar(this.TabBuilder(1, 'blue'))
69
70        TabContent() {
71          Column().width('100%').height('100%').backgroundColor('#FFBF00')
72        }.tabBar(this.TabBuilder(2, 'yellow'))
73
74        TabContent() {
75          Column().width('100%').height('100%').backgroundColor('#E67C92')
76        }.tabBar(this.TabBuilder(3, 'pink'))
77      }
78      .height(300)
79      .barMode(BarMode.Scrollable, { margin: 16 })
80      .fadingEdge(false)
81      .animationDuration(0)
82      .onChange((index: number) => {
83        this.currentIndex = index
84      })
85    }.width('100%')
86  }
87}
88```
89
90## cl.arkui.2 Refresh组件promptText参数设置为undefined时清空文本内容
91
92**访问级别**
93
94公开接口
95
96**变更原因**
97
98Refresh组件通过promptText参数可传入文本字符串显示在刷新区域,该参数设置为undefined时未清空文本内容,不符合ArkUI通用规范,变更后开发者可设置该参数为undefined清空文本内容。
99
100**变更影响**
101
102该变更为不兼容变更。
103
104变更前,promptText参数设置为undefined时会保持当前值不变,刷新区域显示对应文本内容。
105
106变更后,promptText参数设置为undefined时会清空当前文本内容,刷新区域不显示文本内容。
107
108| 变更前 | 变更后 |
109|---------|---------|
110|![Refresh_Before](figures/Refresh_Before.png)|![Refresh_After](figures/Refresh_After.png)|
111
112**起始API Level**
113
11412
115
116**变更发生版本**
117
118从OpenHarmony SDK 5.0.0.36开始。
119
120**变更的接口/组件**
121
122Refresh组件promptText参数
123
124**适配指导**
125
126开发者需要判断变更后promptText参数设置undefined时清空文本内容后的效果是否符合预期,如不符合可通过对[Refresh组件](../../../application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md)promptText参数设置期望值以达到预期。
127
128```ts
129@Entry
130@Component
131struct RefreshExample {
132  @State isRefreshing: boolean = false
133  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
134  @State promptText: string|undefined = "Loading..."
135
136  build() {
137    Column() {
138      Refresh({ refreshing: $$this.isRefreshing ,
139        promptText: this.promptText  // 设置刷新区域显示文本内容,设置为undefined时清空文本内容
140      }) {
141        List() {
142          ForEach(this.arr, (item: string) => {
143            ListItem() {
144              Text('' + item)
145                .width('80%').height(100).fontSize(16).margin(10)
146                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
147            }
148          }, (item: string) => item)
149        }
150        .width('100%')
151        .height('100%')
152        .alignListItem(ListItemAlign.Center)
153        .scrollBar(BarState.Off)
154      }
155      .backgroundColor(0x89CFF0)
156      .refreshOffset(96)
157    }
158  }
159}
160```
161
162## cl.arkui.3 Popup(气泡组件)UX样式变更
163
164**访问级别**
165
166公开接口
167
168**变更原因**
169
170Popup(气泡组件)UX样式不符合规范
171
172**变更影响**
173
174该变更为不兼容变更。
175
176变更前:
1771、按钮与文本左侧没有对齐
1782、按钮上方与文本下方间距不足8vp
179
180![advanced_popup_before](figures/advanced_popup_before.png)
181
182变更后:
1831、按钮与文本左侧对齐
1842、按钮上方与文本下方间距8vp
185
186![advanced_popup_after](figures/advanced_popup_after.png)
187
188**起始API Level**
189
190API 11
191
192**变更发生版本**
193
194从OpenHarmony SDK 5.0.0.36开始。
195
196**变更的接口/组件**
197
198Popup(气泡组件)
199
200**适配指导**
201
202默认效果变更,无需适配,但应注意变更后的默认效果是否符合开发者预期,如不符合则应自定义修改效果控制变量以达到预期。
203
204## cl.arkui.4 Menu(菜单组件)组件内borderRadius方法支持设置LocalizedBorderRadiuses类型参数
205
206**访问级别**
207
208公开接口
209
210**变更原因**
211
212bindMenu和bindContextMenu组件内borderRadius方法不支持设置LocalizedBorderRadiuses类型参数
213
214**变更影响**
215
216该变更为不兼容变更。
217
218变更前:
219在menu内使用borderRadius方法设置菜单圆角时,不支持LocalizedBorderRadiuses类型的参数。
220
221![menu_before](figures/menu_before.png)
222
223变更后:
224在menu内使用borderRadius方法设置菜单圆角时,支持LocalizedBorderRadiuses类型的参数,并支持镜像。
225
226![menu_after](figures/menu_after.png)
227
228**起始API Level**
229
230API 12
231
232**变更发生版本**
233
234从OpenHarmony SDK 5.0.0.36开始。
235
236**变更的接口/组件**
237
238Menu(菜单组件)
239
240**适配指导**
241
242开发者可以在menu内通过borderRadius接口设置菜单圆角,且当参数类型为LocalizedBorderRadiuses类型时,支持镜像能力。
243
244```ts
245import { LengthMetrics } from '@ohos.arkui.node';
246
247@Entry
248@Component
249struct Index {
250
251  @Builder
252  MyMenu(){
253    Menu() {
254      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
255      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
256      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
257      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
258      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
259      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
260        .enabled(true)
261    }
262  }
263
264  build() {
265    Row() {
266      Column() {
267        Text('click to show menu')
268          .fontSize(50)
269          .fontWeight(FontWeight.Bold)
270      }
271      .bindMenu(this.MyMenu, {
272        enableArrow: true,
273        // 设置圆角
274        borderRadius: { topStart: LengthMetrics.vp(20), bottomStart: LengthMetrics.vp(60) }
275      })
276      .width('100%')
277    }
278    .height('100%')
279  }
280}
281```
282
283## cl.arkui.5 setWindowSystemBarEnable 接口废弃变更
284
285**访问级别**
286
287公开接口
288
289**变更原因**
290
291该接口有Promise和callback两种调用方式,使用callback方式的接口错误码不满足ArkTS API异常处理规范,标废弃,使用同名的Promise接口代替。
292
293**变更影响**
294
295该变更为兼容性变更。
296
297从API version 12开始,setWindowSystemBarEnable的callback方式调用将不推荐使用,推荐使用Promise方式的同名接口。
298
299**起始 API Level**
300
301API 9
302
303**变更发生版本**
304
305从OpenHarmony SDK 5.0.0.36版本开始。
306
307**变更的接口/组件**
308
309Window#setWindowSystemBarEnable(names: Array<'status' | 'navigation'>, callback: AsyncCallback&lt;void&gt;): void。
310
311**适配指导**
312
313不涉及
314
315## cl.arkui.6 setWindowLayoutFullScreen 接口废弃变更
316
317**访问级别**
318
319公开接口
320
321**变更原因**
322
323该接口有Promise和callback两种调用方式,使用callback方式的接口错误码不满足ArkTS API异常处理规范,标废弃,使用同名的Promise接口代替。
324
325**变更影响**
326
327该变更为兼容性变更。
328
329从API version 12 setWindowLayoutFullScreen的callback方式调用将不推荐使用,推荐使用Promise方式的同名接口。
330
331**起始 API Level**
332
333API 9
334
335**变更发生版本**
336
337从OpenHarmony SDK 5.0.0.36版本开始。
338
339**变更的接口/组件**
340
341Window#setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void。
342
343**适配指导**
344
345不涉及
346
347## cl.arkui.7 setWindowSystemBarProperties 接口废弃变更
348
349**访问级别**
350
351公开接口
352
353**变更原因**
354
355该接口有Promise和callback两种调用方式,使用callback方式的接口错误码不满足ArkTS API异常处理规范,标废弃,使用同名的Promise接口代替。
356
357**变更影响**
358
359该变更为兼容性变更。
360
361从API version 12开始,setWindowSystemBarProperties的callback方式调用将不推荐使用,推荐使用Promise方式的同名接口。
362
363**起始 API Level**
364
365API 9
366
367**变更发生版本**
368
369从OpenHarmony SDK 5.0.0.36版本开始。
370
371**变更的接口/组件**
372
373Window#setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback&lt;void&gt;): void。
374
375**适配指导**
376
377不涉及
378
379## cl.arkui.8  Toast弹窗UX样式变更
380
381**访问级别**
382
383公开接口
384
385**变更原因**
386
387UX规格变更
388
389**变更影响**
390
391该变更为不兼容变更。
392
393- API version 11及之前,Toast弹窗背景色为深黑色、字色为白色,最大高度没有限制,界面语超长没有截断。<br/>
394
395- API version 12及之后,Toast弹窗在常规亮色显示风格下toast透明模糊背景、字色黑色,暗色显示风格下透明模糊背景、字色白色。<br/>
396Toast的最大高度 =(屏幕高度-信号栏-导航条)*0.65,最大宽度:基于屏幕宽度-2侧margin,根据容器自适应,最大到400vp不再变化。<br/>
397界面语超长逐级缩小字号至12fp,超出截断。
398
399- API version 11及之前对比API version 12及之后属性变更如下
400
401 | 属性名 | 变更前 | 变更后 |
402|---------|---------|---------|
403| 背景色 | bg_color | COMPONENT_ULTRA_THICK |
404| 圆角 | toast_border_radius | corner_radius_level9 |
405| padding-left | toast_padding_horizontal | padding_level8 |
406| padding-top | toast_padding_vertical | padding_level4 |
407| padding-right | toast_padding_horizontal | padding_level8 |
408| padding-bottom | toast_padding_vertical | padding_level4 |
409| 字体大小 | text_font_size | Body_M |
410| 字体颜色 | text_color | font_primary |
411| 字重 | toast_text_font_weight | font_weight_regular |
412
413示例如下:
414如下图所示为变更前后效果对比:
415
416 | 变更前 | 变更后 |
417|---------|---------|
418| ![](figures/toast_api11.png)  |  ![](figures/toast_api12.png)  |
419
420**API Level**
421
42212
423
424**变更发生版本**
425
426从OpenHarmony SDK 5.0.0.36 版本开始。
427
428**变更的接口/组件**
429
430promptAction.showToast
431
432**适配指导**
433
434UX默认行为变更,无需适配。可以通过[promptAction](../../../application-dev/reference/apis-arkui/js-apis-promptAction.md)中ShowToastOptions接口自定义Toast背景色、字色等。
435
436
437## cl.arkui.9 QRCode深浅色适配修改
438
439**访问级别**
440
441公开接口
442
443**变更原因**
444
445QRCode在深色模式下使用默认颜色生成的二维码无法被正常识别。
446
447**变更影响**
448
449该变更为不兼容变更。
450
451变更前:在深色模式下,QRCode生成的二维码背景颜色为黑色,图案颜色为白色。
452
453变更后:在深色模式下,QRCode生成的二维码背景颜色为白色,图案颜色为黑色,与浅色模式相同。
454
455**起始API Level**
456
45712
458
459**变更发生版本**
460
461从OpenHarmony SDK 5.0.0.36开始。
462
463**变更的接口/组件**
464
465QRcode组件
466
467**适配指导**
468
469默认效果变更,无需适配。