1# arkui子系统ChangeLog
2
3## cl.arkui.1 Navigation标题自定义位置变更
4
51. NavigationTitleMode设置为Full、Free或者Mini不带返回键场景。
6
7   API Version 9：保持左边距 24vp。
8
9   API Version 10: 左边距发生更改，由24vp更改为0。上边距由居中显示更改为上边距0。
10
112. NavigationTitleMode设置为Mini并且显示返回键。
12
13   API Version 9: 自定义标题与返回键间距为16vp。
14
15   API Version 10: 自定义标题栏与返回键间距变更：16vp变更为12vp。
16
173. 自定义Menu场景。
18
19   API Version 9：右边距为24vp。
20
21   API Version 10: 右边距由24vp变更为0。
22
23**变更原因**
24
25从API Version 9开始，会对Navigation的自定义标题以及自定义Menu添加边距，影响开发者对自定义组件的使用。从4.0.10.6版本对该问题进行优化，针对API Version 10的应用去掉自定义标题标题和自定义Menu的偏移。
26
27**变更影响**
28
29该变更会导致API Version 10中使用Navigation自定义标题位置发生变化，显示会偏左和偏上。针对API Version 9及以下应用无影响。
30
31**适配方法**
32
331. 针对NavigationTitleMode.Full、Free模式以及NavigationTitleMode.Mini,添加左间距偏移：$r('sys.float.ohos_id_max_padding_start')。
34实现自定标题的居中效果: .height('100%').alignItems(VerticalAlign.Center)
35
362. 针对NavigationTitleMode设置为Mini模式，并且显示返回键场景: 添加左偏移：.margin({left: 4}),居中效果同上。
37
383. 针对自定义Menu适配：添加右边距配置: .margin({right: $r('sys.float.ohos_id_max_padding_end')})
39
40
41**示例：**
42```ts
43@Entry
44@Component
45struct Index {
46  @State titleMode: NavigationTitleMode = NavigationTitleMode.Free
47  @State backButton: boolean = false;
48  @Builder CustomMenu() {
49    Column() {
50      Image($r('app.media.icon')).width(24).height(24)
51    }
52  }
53
54  @Builder CustomTitle() {
55    Column() {
56      Text('Custom title').fontSize(20)
57    }
58  }
59
60  build() {
61    Column() {
62      Navigation() {
63        Column() {
64          Text(`Change current title mode: ${this.titleMode}`)
65            .onClick(()=>{
66              if (this.titleMode == NavigationTitleMode.Free) {
67                this.titleMode = NavigationTitleMode.Full;
68              } else if (this.titleMode == NavigationTitleMode.Full) {
69                this.titleMode = NavigationTitleMode.Mini;
70              } else {
71                this.titleMode = NavigationTitleMode.Free;
72              }
73            })
74
75          Text(`Change back button: ${this.backButton}`).onClick(()=>{
76            this.backButton = !this.backButton;
77          }).margin({top: 10})
78        }.margin({top: 40})
79      }.title(this.CustomTitle)
80      .titleMode(this.titleMode)
81      .menus(this.CustomMenu)
82      .hideBackButton(this.backButton)
83    }
84  }
85}
86```
87API Version 9：NavigationTitleMode.Full自定义标题栏以及自定义Menu显示
88
89![Navigation](figures/navigation_full_title_sdk9.png)
90
91API Version 10: NavigationTitleMode.Full自定义标题栏以及自定义Menu显示
92
93![Navigation](figures/navigation_full_title_sdk10.png)
94
95API Version 9: NavigationTitleMode.Mini带返回键自定义标题栏显示
96
97![Navigation](figures/navigation_mini_title_sdk9.png)
98
99API Version 10: NavigationTitleMode.Mini带返回键自定义标题栏显示
100
101![Navigation](figures/navigation_mini_title_sdk10.png)
102
103API Version 9: NavigationTitleMode.Mini不带返回键标题栏显示
104
105![Navigation](figures/navigation_mini_title_no_back_sdk9.png)
106
107API Version 10: NavigationTitleMode.Mini不带返回键标题栏显示
108
109![Navigation](figures/navigation_mini_title_no_back_sdk10.png)
110
111## cl.arkui.2 NavDestination标题栏变更
112
113针对自定义标题：
114
1151. 带返回键场景。
116
117   API Version 9：返回键与标题栏间距为16vp，标题栏居中。
118
119   API Version 10：标题栏与返回键间距变更由16vp变更为12vp，标题栏上偏移该为0。
120
1212. 不带返回键场景。
122
123   API Version 9: 标题栏左间距为24vp，标题栏居中。
124
125   API Version 10：标题栏左间距变更24vp变更为0,标题栏上偏移该为0。
126
127**变更原因**
128
129从API Version 9开始，会对Navigation的自定义标题添加边距，影响开发者对自定义组件的使用。从4.0.10.6版本对该问题进行优化，针对API Version 10的应用去掉自定义标题标题的偏移。
130
131**变更影响**
132NavDestination自定义标题栏会移到左上
133
134**适配方法**
135
136应用如果要保持之前的显示效果，可以采用如下方案适配：
137
1381. 针对不带返回键的场景，添加左偏移： margin({left: $r('sys.float.ohos_id_max_padding_start')}),
139添加居中效果 .height('100%').alignItems(VerticalAlign.Center)
140
1412. 针对带返回键场景，添加做偏移：margin（{left: 4})，居中实现效果同上。
142
143**示例：**
144```ts
145@Entry
146@Component
147struct Index {
148  @Builder NavigationTile() {
149    Column() {
150      Text('title').fontColor('#182431').fontSize(30).lineHeight(41)
151      Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20)
152    }
153  }
154
155  build() {
156    Column() {
157      Navigation() {
158        Text('Navigation')
159      }.title(this.NavigationTitle)
160       .titleMode(NavigationTitleMode.Free)
161       .menus([
162        {icon: 'common/image/icon.png', value: 'menu1'}
163       ])
164    }
165  }
166}
167```
168
169API Version 9：带返回键自定义标题页面
170
171![NavDstination](figures/navdestination_back_sdk9.png)
172
173API Version 10: 带返回键自定义标题页面
174
175![NavDestination](figures/navdestination_back_sdk10.png)
176
177API9: 不带返回键自定义标题页面
178
179![NavDestination](figures/navdestination_no_back_sdk9.png)
180
181API10: 不带返回键自定义标题页面
182
183![NavDestination](figures/navdestination_no_back_sdk10.png)
184
185## cl.arkui.3 NavRouter回调OnStateChange变更
186
187OnStateChange调用次数修复：
188
189针对目标显示NavDestination的OnStateChange回调由调用2次，修复为调用1次，调用顺序不受影响。
190
191**变更影响**
192
193利用OnStateChange调用时序处理的应用会受到影响。
194
195   更改之前调用时序：目标显示NavRouter触发OnStateChange(true) -> 退出NavRouter触发OnStateChange(false) -> 目标显示NavRouter触发OnStateChange(true)
196
197   更改之后调用时序：目标显示NavRouter触发OnStateChange(true) -> 退出NavRouter触发OnStateChange(false)