1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Safe Area Behavior Change for Dialog Box Avoidance
4
5**Access Level**
6
7Public API
8
9**Reason for Change**
10
11The mask area cannot cover the bottom navigation bar, and in immersive mode, the content is still displayed in the navigation bar and status bar.
12
13**Change Impact**
14
15This change is a non-compatible change.
16
17Before change: 1. The dialog box mask area does not extend to the bottom navigation bar. 2. When **showInSubwindow** is **true** or the application is configured for immersive mode, the content is still displayed in the top status bar and bottom navigation bar.
18
19After change: 1. The dialog box mask area extends to the bottom navigation bar by default. 2. When **showInSubwindow** is **true** or the application is configured for immersive mode, the content is not displayed in the top status bar and bottom navigation bar.
20
21The following figure shows the effect comparison before and after the change when **Alignment** is set to **Bottom**.
22
23![dialog change](figures/dialog_changelog.png)
24
25**API Level**
26
27**AlertDialog** and **CustomDialog**: API version 7; **ActionSheet**, **DatePickerDialog**, **TimePickerDialog**, and **TextPickerDialog**: API version 8; **promptAction.showDialog**: API version 9; **promptAction.openCustomDialog**: API version 11
28
29**Change Since**
30
31OpenHarmony SDK 5.0.0.19
32
33**Key API/Component Changes**
34
35promptAction.showDialog, promptAction.openCustomDialog, AlertDialog, ActionSheet, DatePickerDialog, TimePickerDialog, TextPickerDialog, CustomDialog
36
37**Adaptation Guide**
38
39To enable the dialog box content to display in the navigation bar, set **alignment** to **DialogAlignment.Bottom** and **offset.dy** to the height of the navigation bar. Here is a specific example code snippet:
401. In the **EntryAbility** page, set the window to full screen and obtain the height of the top status bar and the bottom navigation bar.
41```ts
42// src/main/ets/entryability/EntryAbility.ets
43import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
44import { window } from '@kit.ArkUI';
45
46export default class EntryAbility extends UIAbility {
47  onWindowStageCreate(windowStage: window.WindowStage): void {
48    windowStage.loadContent('pages/Index', (err, data) => {
49      if (err.code) {
50        return;
51      }
52      // Obtain the main window.
53      let windowClass: window.Window = windowStage.getMainWindowSync();
54      // Set the window to full screen.
55      windowClass.setWindowLayoutFullScreen(true)
56      // Obtain the height of the status bar.
57      let statusArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
58      AppStorage.setOrCreate('SafeAreaTopHeight', statusArea.topRect.height);
59      // Obtain the height of the navigation bar.
60      let navigationArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
61      AppStorage.setOrCreate('SafeAreaBottomHeight', navigationArea.bottomRect.height);
62    });
63  }
64}
65```
66
672. When calling the dialog box page, set **alignment** and **offset**.
68```ts
69// src/main/ets/pages/Index.ets
70let storage = LocalStorage.getShared();
71
72@CustomDialog
73struct CustomDialogExample {
74  controller?: CustomDialogController
75
76  build() {
77    Column() {
78      Text('This is a dialog box')
79        .fontSize(30)
80        .height(100)
81      Button('Close Dialog Box')
82        .onClick(() => {
83          if (this.controller != undefined) {
84            this.controller.close()
85          }
86        })
87        .margin(20)
88    }
89  }
90}
91
92@Entry(storage)
93@Component
94struct CustomDialogUser {
95  safeAreaTopHeight: string = AppStorage.get<number>('SafeAreaTopHeight') + 'px';
96  safeAreaBottomHeight: string = AppStorage.get<number>('SafeAreaBottomHeight') + 'px';
97  dialogController: CustomDialogController | null = new CustomDialogController({
98    builder: CustomDialogExample(),
99    alignment: DialogAlignment.Bottom,
100    offset: { dx: 0, dy: this.safeAreaBottomHeight }
101  })
102
103  build() {
104    Column() {
105      Button('Open Dialog Box')
106        .onClick(() => {
107          if (this.dialogController != null) {
108            this.dialogController.open()
109          }
110        })
111    }
112    .width('100%')
113    .height('100%')
114    .justifyContent(FlexAlign.Center)
115  }
116}
117```
118
119## cl.arkui.2 Change in the colors Parameter Type for linearGradient, sweepGradient, radialGradient, and LinearGradient from Array\<any> to Array\<[ResourceColor, number]>
120
121**Access Level**
122
123Public API
124
125**Reason for Change**
126
127The use of the **any** type in APIs can be too broad, as it does not provide clear guidance on what specific types are expected or allowed.
128
129**Change Impact**
130
131This change is a non-compatible change.
132
133Before change: The **colors** parameter for the **linearGradient**, **sweepGradient**, and **radialGradient** universal attributes and the **LinearGradient** API is allowed to be defined as an **Array\<any>** type.
134
135After change: If an incompatible **colors** parameter type with **Array\<[ResourceColor, number]>** is used, such as **Array\<any>**, a compilation error will occur.
136
137**API Level**
138
139**linearGradient**, **sweepGradient**, and **radialGradient**: API version 7; **LinearGradient**: API version 9
140
141**Change Since**
142
143OpenHarmony SDK 5.0.0.19
144
145**Adaptation Guide**
146
147To define variables used in the **linearGradient**, **sweepGradient**, and **radialGradient** APIs, the type of the **colors** parameter should be accurately defined to be compatible with **Array\<[ResourceColor, number]>**.
148
149Example:
150```ts
151@Entry
152@Component
153struct Test {
154  colors: Array<any> = [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]];
155  build() {
156    Row()
157      .width('90%')
158      .height(50)
159      .linearGradient({
160        angle: 90,
161        // colors is defined as the Array<any> type. This will result in a compilation error.
162        colors: this.colors
163      })
164  }
165}
166```
167Adjust the **colors** parameter to be compatible with the API's expected type, for example, **colors: Array&lt;[ResourceColor, number]&gt; = [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]**.
168
169