1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Restrictions on Data Type Declarations of State Variables
4
5The data types of state variables decorated by state decorators must be explicitly declared. They cannot be declared as **any**.
6
7**Example**
8
9```ts
10// xxx.ets
11@Entry
12@Component
13struct DatePickerExample {
14  // Incorrect: @State isLunar: any = false
15  @State isLunar: boolean = false
16
17  build() {
18   ...
19  }
20}
21```
22
23**Change Impacts**
24
25If the data type of a state variable decorated by a state decorator is declared as **any**, a WARN-level (previously ERROR-level) build error will occur.
26
27```ts
28// ArkTS:ERROR Please define an explicit type, not any.
29@State isLunar: any = false
30```
31
32**Key API/Component Changes**
33
34N/A
35
36**Adaptation Guide**
37
38Explicitly declare the data type for state variables decorated by state decorators.
39
40## cl.arkui.2 Initialization Rules and Restrictions of Custom Components' Member Variables
41
42**@LocalStorageLink** and **@LocalStorageProp** variables cannot be initialized from the parent component.
43
44**Example**
45
46```ts
47let NextID: number = 0;
48
49@Observed
50class ClassA {
51  public id: number;
52  public c: number;
53
54  constructor(c: number) {
55    this.id = NextID++;
56    this.c = c;
57  }
58}
59
60@Entry
61@Component
62struct LocalStorageComponent {
63  build() {
64    Column() {
65      Child({
66        /* ArkTS:ERROR Property 'simpleVarName' in the custom component 'Child' cannot
67          initialize here (forbidden to specify). */
68        simpleVarName: 1,
69        /* ArkTS:ERROR Property 'objectName' in the custom component 'Child' cannot
70          initialize here (forbidden to specify). */
71        objectName: new ClassA(1)
72      })
73    }
74  }
75}
76
77@Component
78struct Child {
79  @LocalStorageLink("storageSimpleProp") simpleVarName: number = 0;
80  @LocalStorageProp("storageObjectProp") objectName: ClassA = new ClassA(1);
81
82  build() {
83  }
84}
85```
86
87**Change Impacts**
88
89If **@LocalStorageLink** and **@LocalStorageProp** variables are initialized from the parent component, a WARN-level (previously ERROR-level) build error will occur.
90
91**Key API/Component Changes**
92
93N/A
94
95**Adaptation Guide**
96
97When building a child component, do not assign values to the variables by **@LocalStorageLink** and **@LocalStorageProp** in the child component.
98
99To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
100
101## cl.arkui.3 Change of the bottom Definition in Toast Options in the PromptAction Module
102
103Changed the definition of the **bottom** attribute in toast options from distance between the top of the toast and the bottom of the screen to distance between the bottom of the toast and the bottom of the screen.
104
105**Example**
106
107```ts
108import promptAction from '@ohos.promptAction';
109@Entry
110@Component
111struct Index {
112  build() {
113    Row() {
114      Button()
115      .onClick(() => {
116        try {
117          promptAction.showToast({
118            message: 'Message Info',
119            duration: 2000
120          });
121        } catch (error) {
122          console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
123        };
124      })
125    }
126  }
127}
128```
129
130**Change Impacts**
131
132In the **PromptAction** module, the same value for the **bottom** attribute may result in different toast appearances, depending on whether the API version used by the compiler is earlier than 10 or not.
133
134**Key API/Component Changes**
135
136N/A
137
138**Adaptation Guide**
139
140When setting the **bottom** attribute, account for the definition change.
141
142## cl.arkui.4 Content Layout Change of AlertDialog
143
144The content layout of the alert dialog box varies according to the following conditions: 1. whether there is a title. 2. whether the text is on a single line.
145
146Currently, only the single-line text without a title is centered. In other cases, the text is left-aligned.
147
148**Example**
149
150```ts
151// xxx.ets
152@Entry
153@Component
154struct AlertDialogExample {
155  build() {
156    Column({ space: 5 }) {
157      Button('one button dialog')
158        .onClick(() => {
159          AlertDialog.show(
160            {
161              title: 'title',
162              message: 'text'.repeat(20),
163              autoCancel: true,
164              alignment: DialogAlignment.Bottom,
165              offset: { dx: 0, dy: -20 },
166              gridCount: 3,
167              confirm: {
168                value: 'button',
169                action: () => {
170                  console.info('Button-clicking callback')
171                }
172              },
173              cancel: () => {
174                console.info('Closed callbacks')
175              }
176            }
177          )
178        })
179        .backgroundColor(0x317aff)
180    }.width('100%').margin({ top: 5 })
181  }
182}
183```
184
185**Change Impacts**
186
187The layout for the text specified by the **message** attribute of the alert dialog box is subject to the title and number of lines of the text.
188
189**Key API/Component Changes**
190
191N/A
192
193**Adaptation Guide**
194
195No proactive adaptation is required. You can also use **customDialog** for related implementation.
196
197## cl.arkui.5 Avoidance Behavior Optimization of Popup
198
199Before the change, the popup preferentially uses the lower area for avoidance. As a result, it cannot be displayed in the upper area even if the space is sufficient.
200
201After the change: The popup preferentially uses the upper area for avoidance when it is configured to show above the target component; it preferentially uses the upper or lower area for avoidance when it is configured to show below the target component.
202
203**Change Impacts**
204
205The optimized popup avoidance behavior occurs when the **bindpopup** attribute is used.
206
207**Key API/Component Changes**
208
209N/A
210
211**Adaptation Guide**
212
213If the popup position is not as expected, you can adjust the **placement** settings.
214