1# ArkUI Subsystem Changelog
2## cl.arkui.1 Changes in the Default QR Code Color, Background Color, and Size
3
4**Access Level**
5
6Public
7
8**Reason for Change**
9
10The default color and size of the **\<QRCode>** component do not comply with the UX specifications.
11
12**Change Impact**
13
14This change is a compatible change. It delivers a more visually appealing component.
15
16**API Level**
17
187
19
20**Key API/Component Changes**
21
22In versions earlier than API version 11, the **\<QRCode>** component uses the following default settings: color: **Color.Black**; background color: **Color.White**; width and height: same as the parent component.
23
24![qrcode](figures/qrcodeApi10.png)
25
26Since API version 11, the **\<QRCode>** component uses the following default settings: color: **ohos_id_color_foreground**; background color: **ohos_id_color_background**; width and height: 240 vp.
27
28![qrcode](figures/qrcodeApi11.png)
29
30**Adaptation Guide**
31
32For details, see [QRCode](../../../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-qrcode.md).
33
34Sample code:
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 Changes to the \<Refresh> Component
49
50**Access Level**
51
52Public
53
54**Reason for Change**
55
56The UI specifications are changed to bring about UX enhancement.
57
58**Change Impact**
59
601. Default refresh settings
61
62In versions earlier than API version 11, child components of the **\<Refresh>** component do not move down with the pull-down gesture, and the edge bounce effect of the component is independent of the loading.
63
64![refresh](figures/refreshApi9Default.gif)
65
66Since API version 11, child components of the **\<Refresh>** component move down with the pull-down gesture.
67
68![refresh](figures/refreshApi11Default.gif)
69
702. Custom refresh settings with the builder API
71
72In versions earlier than API version 11, the **\<Refresh>** component is embedded with child components, with a height not greater than 64 vp. The edge bounce effect of the scrolling component and the custom refresh style for the pull-down gesture take effect at the same time.
73
74![refresh](figures/refreshApi9Builder.gif)
75
76Since API version 11, child components of the **\<Refresh>** component move down with the pull-down gesture. There are no constraints on the height of the custom refresh component with the builder API.
77
78![refresh](figures/refreshApi11Builder.gif)
79
803. **friction** API
81
82In versions earlier than API version 11, the **\<Refresh>** component's sensitivity to the pull-down gesture is set through the **friction** API.
83Since API version 11, the **\<Refresh>** component's sensitivity to the pull-down gesture decreases with the pull-down gesture. The **friction** API has no effect.
84
854. **offset** API
86
87In versions earlier than API version 11, the pull-down distance required for the **\<loadingProgress>** component to start to display is set through the **offset** API of the **\<Refresh>** component.
88Since API version 11, the pull-down distance required for the **\<loadingProgress>** component to start to display is fixed at 16 vp. The **friction** API has no effect.
89
90**API Level**
91
928
93
94**Change Since**
95
96OpenHarmony SDK 4.1.2.2
97
98**Key API/Component Changes**
99
100Refresh
101
102**Adaptation Guide**
103
1041. Default refresh settings
105
106For details, see [Refresh](../../../application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md).
107
108Sample code:
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. Custom refresh settings with the builder API
154
155For details, see [Refresh](../../../application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md).
156
157Sample code:
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("Refreshing...").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** and **offset** APIs
217
218No adaptation is required.
219