1# ArkUI子系统Changelog
2
3## cl.arkui.1 FrameNode的isModifiable值为false时，无法通过addComponentContent挂载节点
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11addComponentContent接口用于实现ComponentContent对象的挂载，但是只有isModifiable为true的FrameNode对象允许更改其子节点，当前实现与设计不一致。
12
13**变更影响**
14
15该变更为不兼容变更。
16
17变更前：addComponentContent可以向isModifiable为false的FrameNode对象挂载子节点。
18
19变更后：addComponentContent无法向isModifiable为false的FrameNode对象挂载子节点，调用addComponent接口后会抛出异常导致子节点挂载失败，并出现白屏，可以通过try catch捕获异常解决。
20
21| 变更前 | 变更后 |
22|---------|---------|
23|![addComponentContent_before](figures/addComponentContent_before.png)|![addComponentContent_after](figures/addComponentContent_after.png)|
24
25**起始API Level**
26
27API 12
28
29**变更发生版本**
30
31从OpenHarmony SDK 5.0.0.38开始。
32
33**变更的接口/组件**
34
35FrameNode的addComponentContent接口。
36
37**适配指导**
38
39开发者在使用addComponentContent前需要判断父节点的isModifiable是否为true，不支持isModifiable为false的FrameNode节点使用addComponentContent新增子节点。需要在声明式组件中动态添加内容时，可以通过占位节点[NodeContainer](../../../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-nodecontainer.md)、[ContentSlot](../../../application-dev/quick-start/arkts-rendering-control-contentslot.md)进行操作。
40
41```ts
42import { ComponentContent, NodeContent, typeNode } from "@kit.ArkUI"
43
44interface ParamsInterface {
45  text: string;
46}
47
48@Builder
49function buildText(params: ParamsInterface) {
50  Column() {
51    Text(params.text)
52      .fontSize(20)
53      .fontWeight(FontWeight.Bold)
54      .margin({ bottom: 36 })
55  }
56}
57
58@Entry
59@Component
60struct Index {
61  @State message: string = "hello"
62  private content: NodeContent = new NodeContent();
63
64  build() {
65    Row() {
66      Column() {
67        Button('addComponentContent')
68          .onClick(() => {
69            let column = typeNode.createNode(this.getUIContext(), "Column");
70            column.initialize();
71            if (column.isModifiable()) {
72              column.addComponentContent(new ComponentContent<ParamsInterface>(this.getUIContext(),
73                wrapBuilder<[ParamsInterface]>(buildText), { text: 'Colum Text isModifiable true' }))
74            }
75            this.content.addFrameNode(column)
76            let column1 = this.getUIContext().getFrameNodeById('column1');
77            if (!column1?.isModifiable()) {
78              try {
79                column1?.addComponentContent(new ComponentContent<ParamsInterface>(this.getUIContext(),
80                  wrapBuilder<[ParamsInterface]>(buildText), { text: 'Colum1 Text isModifiable false' }))
81              } catch (e) {
82                console.error('addComponentContent fail, err: ' + e);
83              }
84            }
85          })
86        ContentSlot(this.content)
87      }
88      .id('column1')
89      .width('100%')
90      .height('100%')
91    }
92    .height('100%')
93  }
94}
95```
96
97## cl.arkui.2 Waterflow组件onScroll接口废弃变更
98
99**废弃原因**
100
101onScroll事件在Scroll组件和List、Grid、WaterFlow组件中回调时机不一样，Scroll组件在布局前回调，其他组件在布局后回调，开发者使用时，对回调时机可能会混淆。
102
103在API version 12，ArkUI提供了onWillScroll和onDidScroll两种回调时机更明确的接口。其中，Waterflow组件的onDidScroll接口可以完全替换onScroll接口，所以废弃Waterflow的onScroll接口。
104
105
106**废弃影响**
107
108该变更为兼容性变更。
109
110从API version 12开始，Waterflow的onScroll接口将废弃，推荐使用OnDidScroll接口替代。
111
112**起始 API Level**
113
114API 11
115
116**废弃发生版本**
117
118从OpenHarmony SDK 5.0.0.38版本开始。
119
120**废弃的接口/组件**
121
122Waterflow组件的OnScroll接口。
123
124**适配指导**
125
126```ts
127@Entry
128@Component
129struct Index {
130  @State data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
131
132  build() {
133    Column({ space: 10 }) {
134      WaterFlow() {
135        ForEach(this.data, (item: number) => {
136          FlowItem() {
137          }
138          .height(100).width('100%')
139        })
140      }
141      .columnsGap(10)
142      .rowsGap(10)
143      .columnsTemplate("1fr 1fr")
144      .width("80%")
145      .height("100%")
146      // 变更前
147      .onScroll((scrollOffset: number, scrollState: ScrollState) => {
148        console.log('onScroll scrollOffset: ' + scrollOffset + ', scrollState: ' + scrollState)
149      })
150      // 变更后
151      .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
152        console.log('onDidScroll scrollOffset: ' + scrollOffset + ', scrollState: ' + scrollState)
153      })
154    }
155    .height('100%')
156    .width('100%')
157  }
158}
159```
160## cl.arkui.3  状态管理V2版本组件内的@Local,@Param,@Event,@Provider,@Consumer,@BuilderParam,必须声明类型
161
162**访问级别**
163
164公开接口
165
166**变更原因**
167
168 V2组件内的@Local,@Param,@Event,@Provider,@Consumer,@BuilderParam装饰器不需要写类型就可以编译成功，而装饰器是有类型限制的，所以这些装饰器需要加上类型校验。
169
170**变更影响**
171
172该变更为不兼容变更。
173
174变更前：V2组件内的@Local,@Param,@Event,@Provider,@Consumer,@BuilderParam修饰的变量没有写类型编译不会报错。
175
176变更后：V2组件内的@Local,@Param,@Event,@Provider,@Consumer,@BuilderParam修饰的变量没有写类型编译报错。
177
178
179**起始API Level**
180
181API 12
182
183**变更发生版本**
184
185从OpenHarmony 5.0.0.38 版本开始。
186
187**变更的接口/组件**
188
189无。
190
191**适配指导**
192
193在V2组件内，每一个被@Local,@Param,@Event,@Provider,@Consumer,@BuilderParam修饰的变量加上类型声明。
194
195```ts
196
197@Builder
198function testBuilder() {
199
200}
201
202@Entry
203@ComponentV2
204struct V2ComponentMember {
205  @Local localValue: string = 'localValue';
206  @BuilderParam builderParamValue: () => void = testBuilder;
207  @Param paramValue: string = 'paramValue';
208  @Event eventValue: string = 'eventValue';
209  @Provider() providerValue: string = 'providerValue';
210  @Consumer() consumerValue: string = 'consumerValue';
211  build() {
212
213  }
214}
215```
216## cl.arkui.4 Tabs组件的选中页签为子页签且背板模式时，其默认字体颜色变更
217
218**访问级别**
219
220公开接口
221
222**变更原因**
223
224Tabs组件内TabContent子组件的tabbar属性为SubTabBarStyle对象，SubTabBarStyle对象的selectedMode为SelectedMode.BOARD情况下，选中页签的默认字体颜色与背板颜色一致，此时文本内容无法清晰可见，因此修改其默认字体颜色。
225
226**变更影响**
227
228该变更为兼容性变更。
229
230变更前：选中子页签背板模式下默认字体颜色为'#ff007dff'
231
232变更后：选中子页签背板模式下默认字体颜色为'#ffffff'
233
234| 变更前 | 变更后 |
235|---------|---------|
236| ![](figures/tabs_before.png) | ![](figures/tabs_after.png) |
237
238**起始API Level**
239
240API 10
241
242**变更发生版本**
243
244从OpenHarmony SDK 5.0.0.38开始。
245
246**变更的接口/组件**
247
248Tabs组件
249
250**适配指导**
251
252若需要变更前的颜色，可以修改SubTabBarStyle对象的labelStyle属性中selectedColor值为变更前的默认颜色。
253
254```ts
255@Entry
256@Component
257struct TabBarStyleExample {
258  build() {
259    Column() {
260      Tabs({ barPosition: BarPosition.Start }) {
261        TabContent() {
262          Column().width('100%').height('100%').backgroundColor(Color.Pink)
263        }.tabBar(new SubTabBarStyle('Pink')
264          .selectedMode(SelectedMode.BOARD)
265          .labelStyle({selectedColor:'#ff007dff'}))
266      }
267      .vertical(false)
268      .scrollable(true)
269      .barMode(BarMode.Fixed)
270      .width('100%')
271      .backgroundColor(0xF1F3F5)
272    }.width('100%').height(200)
273  }
274}
275```
276## cl.arkui.5 Text组件属性字符串支持超链接
277
278**访问级别**
279
280公开接口
281
282**变更原因**
283
284为了提升Text组件的联合布局能力，StyledStringValue需要增加UrlStyle类型。
285
286**变更影响**
287
288该变更为兼容性变更。
289
290新增属性字符串超链接功能，提升组件的联合布局能力。
291
292**起始API Level**
293
29412
295
296**变更发生版本**
297
298从OpenHarmony SDK 5.0.0.38开始
299
300**变更的接口/组件**
301
302StyledStringValue
303
304**适配指导**
305
306Text组件属性字符串支持超链接的示例代码：
307
308```ts
309@Entry
310@Component
311struct styled_string {
312  urlString: StyledStringValue = new UrlStyle( "https://www.example.com" );
313  mutableStyledString: MutableStyledString = new MutableStyledString("test hello world", [{
314    start: 0,
315    length: 5,
316    styledKey: StyledStringKey.URL,
317    styledValue: this.urlString
318  }]);
319  controller: TextController = new TextController();
320  async onPageShow() {
321    this.controller.setStyledString(this.mutableStyledString)
322  }
323  build() {
324    Column() {
325      Column() {
326        Text(undefined, { controller: this.controller }).key('mutableStyledString')
327      }
328    }
329  }
330}
331```
332
333
334## cl.arkui.6 属性字符串支持设置背景色能力
335
336**访问级别**
337
338公开接口
339
340**变更原因**
341
342为了提升组件的联合布局能力StyledStringValue需要增加BackgroundColorStyle类型。
343
344**变更影响**
345
346该变更为兼容性变更。
347
348新增属性字符串支持设置背景色能力，提升了组件的联合布局能力。
349
350**起始API Level**
351
35212
353
354**变更发生版本**
355
356从OpenHarmony SDK 5.0.0.38开始
357
358**变更的接口/组件**
359
360StyledStringValue
361
362**适配指导**
363
364属性字符串支持设置背景色能力：
365
366```ts
367@Entry
368@Component
369struct styled_string_demo {
370  @State backColor: TextBackgroundStyle = {color: Color.Yellow, radius: "12vp"};
371  colorVal: BackgroundColorStyle = new BackgroundColorStyle(this.backColor);
372
373  mutableStyledString: MutableStyledString = new MutableStyledString("test hello world are you ok !", [{
374    start: 0,
375    length: 4,
376    styledKey: StyledStringKey.BACKGROUND_COLOR,
377    styledValue: this.colorVal}
378  ],)
379
380  controller: TextController = new TextController();
381
382  async onPageShow() {
383    this.controller.setStyledString(this.mutableStyledString)
384  }
385
386  build() {
387    Column() {
388        Text(undefined, { controller: this.controller }).key('mutableStyledString')
389    }
390  }
391}