• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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/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
80**API Level**
81
828
83
84**变更发生版本**
85
86从OpenHarmony SDK 4.1.2.2 开始。
87
88**变更的接口/组件**
89
90Refresh
91
92**适配指导**
93
941、默认刷新场景
95
96请查阅[Refresh组件](../../../application-dev/reference/arkui-ts/ts-container-refresh.md)文档进行适配
97
98示例代码:
99
100```ts
101@Entry
102@Component
103struct RefreshExample {
104  @State isRefreshing: boolean = false
105  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
106
107  build() {
108    Column() {
109      Refresh({ refreshing: $$this.isRefreshing}) {
110        List() {
111          ForEach(this.arr, (item: string) => {
112            ListItem() {
113              Text('' + item)
114                .width('100%').height(100).fontSize(16)
115                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
116            }
117          }, (item: string) => item)
118        }
119        .onScrollIndex((first: number) => {
120          console.info(first.toString())
121        })
122        .width('100%')
123        .height('100%')
124        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
125        .scrollBar(BarState.Off)
126        .backgroundColor(Color.Yellow)
127      }
128      .onStateChange((refreshStatus: RefreshStatus) => {
129        console.info('Refresh onStatueChange state is ' + refreshStatus)
130      })
131      .onRefreshing(() => {
132        setTimeout(() => {
133          this.isRefreshing = false
134        }, 2000)
135        console.log('onRefreshing test')
136      })
137      .backgroundColor(0x89CFF0)
138    }
139  }
140}
141```
142
1432、使用builder接口自定义刷新组件
144
145请查阅[Refresh组件](../../../application-dev/reference/arkui-ts/ts-container-refresh.md)文档进行适配
146
147示例代码:
148
149```ts
150// xxx.ets
151@Entry
152@Component
153struct RefreshExample {
154  @State isRefreshing: boolean = false
155  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
156  @Builder
157  customRefreshComponent()
158  {
159    Stack()
160    {
161      Row()
162      {
163        LoadingProgress().height(32)
164        Text("正在刷新...").fontSize(16).margin({left:20})
165      }
166      .alignItems(VerticalAlign.Center)
167    }.width("100%").align(Alignment.Center)
168  }
169
170  build() {
171    Column() {
172      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
173        List() {
174          ForEach(this.arr, (item: string) => {
175            ListItem() {
176              Text('' + item)
177                .width('100%').height(100).fontSize(16)
178                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
179            }
180          }, (item: string) => item)
181        }
182        .onScrollIndex((first: number) => {
183          console.info(first.toString())
184        })
185        .width('100%')
186        .height('100%')
187        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
188        .scrollBar(BarState.Off)
189        .backgroundColor(Color.Yellow)
190      }
191      .onStateChange((refreshStatus: RefreshStatus) => {
192        console.info('Refresh onStatueChange state is ' + refreshStatus)
193      })
194      .onRefreshing(() => {
195        setTimeout(() => {
196          this.isRefreshing = false
197        }, 2000)
198        console.log('onRefreshing test')
199      })
200      .backgroundColor(0x89CFF0)
201    }
202  }
203}
204```