1# Arkui子系统变更说明
2## cl.Arkui.1 QRCode组件的默认颜色、默认背景颜色和默认尺寸变更
3
4**访问级别**
5
6公开接口
7
8**变更原因**
9
10当前QRCode组件的默认颜色和默认尺寸不符合UX规范，因此依照UX规范做出变更。
11
12**变更影响**
13
14该变更为兼容性变更，改变了组件默认情况下的显示颜色和尺寸，提升了组件的默认显示效果。
15
16**API Level**
17
187
19
20**变更的接口/组件**
21
22API 11前，二维码默认颜色是Color.Black，默认背景颜色是Color.White，组件默认宽高是父组件大小。
23
24![qrcode](figures/qrcodeApi10.png)
25
26API 11及以后，二维码默认颜色是系统资源中的`ohos_id_color_foreground`，默认背景颜色是系统资源中的`ohos_id_color_background`，组件默认宽度和高度都是240vp。
27
28![qrcode](figures/qrcodeApi11.png)
29
30**适配指导**
31
32请查阅[QRCode组件](../../../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-qrcode.md)文档进行适配。
33
34示例代码:
35```ts
36// xxx.ets
37@Entry
38@Component
39struct QRCodeExample {
40  private value: string = 'hello world'
41  build() {
42    Column() {
43      QRCode(this.value)
44    }.width('100%').height('100%')
45  }
46}
47```
48## cl.arkui.2 Refresh变更
49
50**访问级别**
51
52公开接口
53
54**变更原因**
55
56UX增强导致的规格变更。
57
58**变更影响**
59
601、默认刷新场景
61
62API 11以前，Refresh组件嵌套子组件，默认场景，刷新组件下拉，子组件不跟随下移。滑动组件的边缘回弹效果和loading的移动是相互独立的。
63
64![refresh](figures/refreshApi9Default.gif)
65
66API 11及以后，Refresh组件嵌套子组件，刷新组件下拉，子组件下移。
67
68![refresh](figures/refreshApi11Default.gif)
69
702、使用builder接口自定义刷新组件
71
72API 11以前，Refresh组件嵌套子组件，自定义刷新组件，刷新组件的高度不大于64vp。滑动组件的边缘回弹效果和builder下拉同时生效。
73
74![refresh](figures/refreshApi9Builder.gif)
75
76API 11及以后，Refresh组件嵌套子组件，刷新组件下拉，子组件下移。自定义刷新组件builder的高度没有限制。
77
78![refresh](figures/refreshApi11Builder.gif)
79
803、friction接口变更
81
82API 11以前，Refresh下拉使用固定跟手系数，跟手系数可以通过friction接口设置。
83API 11及以后，Refresh下拉使用动态跟手系数，下拉距离越大，跟手系数越小。通过friction设置的跟手系数不生效。
84
854、offset接口变更
86
87API 11以前，Refresh组件可以使用offset接口设置loadingProgress开始显示时的下拉距离。
88API 11以后，Refresh组件下拉16vp后开始显示loadingProgress图标，offset接口设置不生效。
89
90**API Level**
91
928
93
94**变更发生版本**
95
96从OpenHarmony SDK 4.1.2.2 开始。
97
98**变更的接口/组件**
99
100Refresh
101
102**适配指导**
103
1041、默认刷新场景
105
106请查阅[Refresh组件](../../../application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md)文档进行适配
107
108示例代码:
109
110```ts
111@Entry
112@Component
113struct RefreshExample {
114  @State isRefreshing: boolean = false
115  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
116
117  build() {
118    Column() {
119      Refresh({ refreshing: $$this.isRefreshing}) {
120        List() {
121          ForEach(this.arr, (item: string) => {
122            ListItem() {
123              Text('' + item)
124                .width('100%').height(100).fontSize(16)
125                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
126            }
127          }, (item: string) => item)
128        }
129        .onScrollIndex((first: number) => {
130          console.info(first.toString())
131        })
132        .width('100%')
133        .height('100%')
134        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
135        .scrollBar(BarState.Off)
136        .backgroundColor(Color.Yellow)
137      }
138      .onStateChange((refreshStatus: RefreshStatus) => {
139        console.info('Refresh onStatueChange state is ' + refreshStatus)
140      })
141      .onRefreshing(() => {
142        setTimeout(() => {
143          this.isRefreshing = false
144        }, 2000)
145        console.log('onRefreshing test')
146      })
147      .backgroundColor(0x89CFF0)
148    }
149  }
150}
151```
152
1532、使用builder接口自定义刷新组件
154
155请查阅[Refresh组件](../../../application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md)文档进行适配
156
157示例代码:
158
159```ts
160// xxx.ets
161@Entry
162@Component
163struct RefreshExample {
164  @State isRefreshing: boolean = false
165  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
166  @Builder
167  customRefreshComponent()
168  {
169    Stack()
170    {
171      Row()
172      {
173        LoadingProgress().height(32)
174        Text("正在刷新...").fontSize(16).margin({left:20})
175      }
176      .alignItems(VerticalAlign.Center)
177    }.width("100%").align(Alignment.Center)
178  }
179
180  build() {
181    Column() {
182      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
183        List() {
184          ForEach(this.arr, (item: string) => {
185            ListItem() {
186              Text('' + item)
187                .width('100%').height(100).fontSize(16)
188                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
189            }
190          }, (item: string) => item)
191        }
192        .onScrollIndex((first: number) => {
193          console.info(first.toString())
194        })
195        .width('100%')
196        .height('100%')
197        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
198        .scrollBar(BarState.Off)
199        .backgroundColor(Color.Yellow)
200      }
201      .onStateChange((refreshStatus: RefreshStatus) => {
202        console.info('Refresh onStatueChange state is ' + refreshStatus)
203      })
204      .onRefreshing(() => {
205        setTimeout(() => {
206          this.isRefreshing = false
207        }, 2000)
208        console.log('onRefreshing test')
209      })
210      .backgroundColor(0x89CFF0)
211    }
212  }
213}
214```
215
2163、friction和offset接口变更
217
218API 11及以后，friction和offset设置不生效，按系统默认UX效果实现，无需适配。