1# ArkUI子系统Changelog
2
3## cl.arkui.1 在字节码HAR中通过router.getState()获取的path内容变更
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11当开发者使用中间码HAR升级到字节码HAR时，通过router.getState()方法获取的path信息不正确。
12
13**变更影响**
14
15该变更为不兼容变更。
16
17此不兼容变更的前提是：源码HAR或者中间码HAR升级为字节码HAR时产生的不兼容。
18
19不兼容场景示例1：
20
21变更前：
22
23当开发者使用的是源码HAR时使用router.getState()方法获取的是**相对路径**。
24
25![pagePath](figures/pagePath2.PNG)
26
27通过router.getState()方法获取的path信息为"../../../../library/src/main/ets/components/"。
28
29当开发者把源码HAR升级为字节码HAR时，通过router.getState()方法获取的path信息为"/\_\_harDefaultPagePath\_\_"，不能获取正确的name和path值。
30
31![pagePath](figures/pagePath3.PNG)
32
33变更后：
34
35当开发者把源码HAR升级为字节码HAR时使用router.getState()方法获取的是**绝对路径**。
36
37![pagePath](figures/pagePath1.PNG)
38
39通过router.getState()方法获取的path信息为"library/src/main/ets/components/"。
40
41不兼容场景示例2：
42
43变更前：
44
45当开发者使用的是中间码HAR时使用router.getState()方法获取的是**相对路径**。
46
47![pagePath](figures/pagePath.PNG)
48
49通过router.getState()方法获取的path信息为"../../../../ + 哈希值 + library/src/main/ets/components/"。
50
51当开发者把中间码HAR升级为字节码HAR时，通过router.getState()方法获取的path信息为"/\_\_harDefaultPagePath\_\_"，不能获取正确的name和path值。
52
53![pagePath](figures/pagePath3.PNG)
54
55变更后：
56
57当开发者把中间码HAR升级为字节码HAR时使用router.getState()方法获取的是**绝对路径**。
58
59![pagePath](figures/pagePath1.PNG)
60
61通过router.getState()方法获取的path信息为"library/src/main/ets/components/"。
62
63**起始API Level**
64
65API 10
66
67**变更发生版本**
68
69从OpenHarmony SDK 5.0.0.49开始
70
71**变更的接口/组件**
72
73router.getState()
74
75**适配指导**
76
77当开发者在代码中有通过router.getState()使用path值时，需要根据获取到的内容进行整改。
78
79
80## cl.arkui.2 enabled属性UX样式变更
81
82**访问级别**
83
84公开接口
85
86**变更原因**
87
88Rating组件与Slider组件enabled属性UX样式不符合规范
89
90**变更影响**
91
92该变更为不兼容变更。
93
94Rating组件变更场景：
95
96| 变更前 | 变更后 |
97|------ |--------|
98|Rating组件设置enable为false时，未叠加40%透明度。</br>![rating_enable](figures/rating_enable.PNG)|Rating组件设置enable为false时，叠加40%透明度。</br>![rating_enable_opacity](figures/rating_enable_opacity.PNG)|
99
100Slider组件变更场景：
101
102| 变更前 | 变更后 |
103|------ |--------|
104|Slider组件设置enable为false时，未叠加40%透明度。</br>![slider_enable](figures/slider_enable.PNG)|Slider组件设置enable为false时，叠加40%透明度。</br>![slider_enable_opacity](figures/slider_enable_opacity.PNG)|
105
106**起始API Level**
107
1087
109
110**变更发生版本**
111
112从OpenHarmony 5.0.0.49 版本开始。
113
114**变更的接口/组件**
115
116通用属性enabled属性。
117
118**适配指导**
119
120默认行为变更，无需适配。
121
122## cl.arkui.3 禁止在转场动画过程中，更新消失节点的属性。
123
124**访问级别**
125
126公开接口
127
128**变更原因**
129
130在转场动画过程中改变正在消失节点的属性，可能造成数据访问异常，产生crash。例如，动画过程中将data置为undefined，Text组件增加默认转场不会立即被删除，在更新状态时，数据访问异常产生crash。因此，需要变更为在转场动画过程中，禁止更新消失节点的属性。
131
132```
133class Mydata {
134  str: string;
135  constructor(str: string) {
136    this.str = str;
137  }
138}
139@State data: Mydata|undefined = new MyData("branch");
140if (this.data) {
141  // 对于删除时增加的默认转场，会延长组件生命周期。Text没有立即被删除，而是等转场动画结束后才被删除
142  Text(this.data.str)
143}
144Button("play with animation")
145  .onClick(()=>{
146    animateTo({},()=>{
147      if (this.data) {
148        // 在动画过程中，会给if下的第一层组件增加默认转场
149        this.data = undefined;
150      }
151    })
152  })
153
154```
155
156**变更影响**
157
158该变更为不兼容变更。
159
160变更前：转场动画过程中，正在消失的节点可以更新属性。
161
162变更后：转场动画过程中，禁止消失的节点更新属性。
163
164**起始API Level**
165
166API 10
167
168**变更发生版本**
169
170从OpenHarmony 5.0.0.49 版本开始。
171
172**变更的接口/组件**
173
174transition属性
175
176**适配指导**
177
178如果要对转场动画过程中，消失的节点进行属性更新，应当在节点下树之前产生，而不是在消失过程中。
179
180示例：
181
182```
183@Entry
184@Component
185struct Index {
186  @State flag: Boolean = true;
187  @State color: Color = Color.Red;
188  build() {
189    Column(){
190      if (this.flag) {
191        Text('abc')
192          .transition(TransitionEffect.OPACITY)
193          .backgroundColor(this.color)
194      }
195
196      Button("play with animation")
197        .onClick(()=>{
198          // 变更前，消失过程中的节点可以更新属性，Text组件的颜色在消失过程中变为蓝色
199          // animateTo({},()=>{
200          //   this.flag ? this.color = Color.Blue : this.color = Color.Red;
201          //   this.flag = !this.flag;
202          // })
203
204          // 变更后，消失过程中的节点无法更新属性，Text组件的颜色在消失过程中一直为红色
205          // 如果需要更新属性，使Text组件的颜色在消失过程中变为蓝色，应当在节点下树之前更新
206          animateTo({},()=>{
207            this.flag ? this.color = Color.Blue : this.color = Color.Red;
208          }) // 节点下树前改变颜色属性
209          animateTo({},()=>{
210            this.flag = !this.flag;
211          })
212        })
213        .width("100%")
214        .padding(10)
215    }
216  }
217}
218```
219
220## cl.arkui.4 Tabs组件barOverlap接口默认效果变更
221
222**访问级别**
223
224公开接口
225
226**变更原因**
227
228优化Tabs组件barOverlap属性设置为true时，TabBar的模糊效果和渲染性能。
229
230**变更影响**
231
232该变更为不兼容变更。
233
234变更前：设置barOverlap属性为true时，TabBar默认背景色修改为'#F2F1F3F5'并添加模糊效果。
235
236变更后：设置barOverlap属性为true时，TabBar默认模糊材质的BlurStyle值修改为'BlurStyle.COMPONENT_THICK'。
237
238| 变更前 | 变更后 |
239|------ |--------|
240|![barOverlap_after](figures/before_baroverlap.jpg)|![barOverlap_before](figures/after_baroverlap.jpg)|
241
242**起始API Level**
243
244API 10
245
246**变更发生版本**
247
248从OpenHarmony 5.0.0.49 版本开始。
249
250**变更的接口/组件**
251
252barOverlap接口
253
254**适配指导**
255
256当barOverlap设置为true时，开发者若期望无模糊效果，设置barBackgroundBlurStyle为BlurStyle.NONE。示例如下：
257
258```ts
259@Entry
260@Component
261struct barHeightTest {
262  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
263  build() {
264    Column() {
265      Tabs({ barPosition: BarPosition.End }) {
266        TabContent() {
267          Column() {
268            List({ space: 10 }) {
269              ForEach(this.arr, (item: number) => {
270                ListItem() {
271                  Text("item" + item).width('80%').height(200).fontSize(16).textAlign(TextAlign.Center).backgroundColor('#fff8b81e')
272                }
273              }, (item: string) => item)
274            }.width('100%').height('100%')
275            .lanes(2).alignListItem(ListItemAlign.Center)
276          }.width('100%').height('100%')
277          .backgroundColor(Color.Pink)
278        }
279        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_icon_mask_svg'), "测试0"))
280
281        TabContent() {
282          Column() {
283            List({ space: 10 }) {
284              ForEach(this.arr, (item: number) => {
285                ListItem() {
286                  Text("item" + item).width('80%').height(200).fontSize(16).textAlign(TextAlign.Center).backgroundColor('#fff8b81e')
287                }
288              }, (item: string) => item)
289            }.width('100%').height('100%')
290            .lanes(2).alignListItem(ListItemAlign.Center)
291          }.width('100%').height('100%')
292          .backgroundColor(Color.Blue)
293        }
294        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_icon_mask_svg'), "测试1"))
295      }
296      .barOverlap(true)
297      .barBackgroundBlurStyle(BlurStyle.NONE) // 关闭TabBar模糊效果
298    }
299  }
300}
301```