1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Change in the Custom Navigation Title Position
4
51. **NavigationTitleMode** is set to **Full**, **Free**, or **Mini** without the back button.
6
7   API version 9: The left margin remains at 24 vp.
8
9   API version 10: The left margin is changed from 24 vp to 0. The top margin is changed from center to 0.
10
112. **NavigationTitleMode** is set to **Mini** and the back button is displayed.
12
13   API version 9: The spacing between the custom title and the back button is 16 vp.
14
15   API version 10: The spacing between the custom title bar and the back button is changed from 16 vp to 12 vp.
16
173. A custom menu is configured.
18
19   API version 9: The right margin is 24 vp.
20
21   API version 10: The right margin is changed from 24 vp to 0.
22
23**Reason for Change**
24
25Since API version 9, offsets are added the custom title and menu of the **\<Navigation>** component, which affects the use of custom components. Since OpenHarmony 4.0.10.6, the offsets are removed from applications in API version 10.
26
27**Change Impact**
28
29In API version 10, the custom navigation title is displayed on the left of or above the position where it would appear in previous API versions.
30
31**Adaptation Guide**
32
331. For **NavigationTitleMode.Full**, **NavigationTitleMode.Free**, and **NavigationTitleMode.Mini**, you can add a left margin by using **$r('sys.float.ohos_id_max_padding_start')**. To center the title on the top, use **.height('100%').alignItems(VerticalAlign.Center)**.
34
352. For **NavigationTitleMode.Mini** with the back button displayed, you can add a left margin by using **.margin({left: 4})**. To center the title on the top, use **.height('100%').alignItems(VerticalAlign.Center)**.
36
373. When a custom menu is configured, you can add a right margin by using **.margin({right: $r('sys.float.ohos_id_max_padding_end')})**.
38
39
40**Example**
41```ts
42@Entry
43@Component
44struct Index {
45  @State titleMode: NavigationTitleMode = NavigationTitleMode.Free
46  @State backButton: boolean = false;
47  @Builder CustomMenu() {
48    Column() {
49      Image($r('app.media.icon')).width(24).height(24)
50    }
51  }
52
53  @Builder CustomTitle() {
54    Column() {
55      Text('Custom title').fontSize(20)
56    }
57  }
58
59  build() {
60    Column() {
61      Navigation() {
62        Column() {
63          Text(`Change current title mode: ${this.titleMode}`)
64            .onClick(()=>{
65              if (this.titleMode == NavigationTitleMode.Free) {
66                this.titleMode = NavigationTitleMode.Full;
67              } else if (this.titleMode == NavigationTitleMode.Full) {
68                this.titleMode = NavigationTitleMode.Mini;
69              } else {
70                this.titleMode = NavigationTitleMode.Free;
71              }
72            })
73
74          Text(`Change back button: ${this.backButton}`).onClick(()=>{
75            this.backButton = !this.backButton;
76          }).margin({top: 10})
77        }.margin({top: 40})
78      }.title(this.CustomTitle)
79      .titleMode(this.titleMode)
80      .menus(this.CustomMenu)
81      .hideBackButton(this.backButton)
82    }
83  }
84}
85```
86API version 9: Custom title and menu in **NavigationTitleMode.Full** settings
87
88![Navigation](figures/navigation_full_title_sdk9.png)
89
90API version 10: Custom title and menu in **NavigationTitleMode.Full** settings
91
92![Navigation](figures/navigation_full_title_sdk10.png)
93
94API version 9: Custom title with the back button in **NavigationTitleMode.Mini** settings
95
96![Navigation](figures/navigation_mini_title_sdk9.png)
97
98API version 10: Custom title with the back button in **NavigationTitleMode.Mini** settings
99
100![Navigation](figures/navigation_mini_title_sdk10.png)
101
102API version 9: Custom title without the back button in **NavigationTitleMode.Mini** settings
103
104![Navigation](figures/navigation_mini_title_no_back_sdk9.png)
105
106API version 10: Custom title without the back button in **NavigationTitleMode.Mini** settings
107
108![Navigation](figures/navigation_mini_title_no_back_sdk10.png)
109
110## cl.arkui.2 Title Bar Change of the \<NavDestination> Component
111
112For custom titles:
113
1141. With the back button
115
116   API version 9: The spacing between the back button and the title bar is 16 vp, and the title bar is centered.
117
118   API version 10: The spacing between the back button and the title bar is changed from 16 vp to 12 vp, and the top offset of the title bar is changed to 0.
119
1202. Without the back button
121
122   API version 9: The title bar is centered, with a left margin of 24 vp.
123
124   API version 10: The left margin of the title bar is changed from 24 vp to 0, and its top offset is changed to 0.
125
126**Reason for Change**
127
128Since API version 9, offsets are added to the custom title of the **\<Navigation>** component, which affects the use of custom components. Since OpenHarmony 4.0.10.6, the offsets are removed from applications in API version 10.
129
130**Change Impact**
131The custom title bar of the **\<NavDestination>** component is displayed in the upper left corner of the position where it would appear in previous API versions.
132
133**Adaptation Guide**
134
135To retain the display effect in previous versions, you can use the following solution:
136
1371. Where the back button is not displayed: Add a left offset by using **margin({left: $r('sys.float.ohos_id_max_padding_start')})**. To center the title bar on the top, use **.height ('100%').alignItems (VerticalAlign.Center)**.
138
1392. Where the back button is displayed: Add a left offset by using **margin ({left: 4})**. To center the title bar on the top, use **.height ('100%').alignItems (VerticalAlign.Center)**.
140
141**Example**
142```ts
143@Entry
144@Component
145struct Index {
146  @Builder NavigationTile() {
147    Column() {
148      Text('title').fontColor('#182431').fontSize(30).lineHeight(41)
149      Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20)
150    }
151  }
152
153  build() {
154    Column() {
155      Navigation() {
156        Text('Navigation')
157      }.title(this.NavigationTitle)
158       .titleMode(NavigationTitleMode.Free)
159       .menus([
160        {icon: 'common/image/icon.png', value: 'menu1'}
161       ])
162    }
163  }
164}
165```
166
167API version 9: Custom title bar with the back button
168
169![NavDstination](figures/navdestination_back_sdk9.png)
170
171API version 10: Custom title bar with the back button
172
173![NavDestination](figures/navdestination_back_sdk10.png)
174
175API version 9: Custom title bar without the back button
176
177![NavDestination](figures/navdestination_no_back_sdk9.png)
178
179API version 10: Custom title bar without the back button
180
181![NavDestination](figures/navdestination_no_back_sdk10.png)
182
183## cl.arkui.3 OnStateChange Callback Change of the \<NavRouter> Component
184
185Changed the number of **OnStateChange** calls for displaying the **\<NavDestination>** component from 2 to 1, which does not affect the call sequence.
186
187**Change Impact**
188
189Applications that use **OnStateChange** for call timing are affected.
190
191- Call sequence before the change: **OnStateChange(true)** triggered by display of **\<NavRouter>** -> **OnStateChange(false)** triggered by exiting of **\<NavRouter>** -> **OnStateChange(true)** triggered by display of **\<NavRouter>**
192
193- Call sequence after the change: **OnStateChange(true)** triggered by display of **\<NavRouter>** -> **OnStateChange(false)** triggered by exiting of **\<NavRouter>**