1# arkui子系统ChangeLog
2
3## cl.arkui.1 Navigation menus属性显示变更
4
5**变更影响**
6
7menus的value属性值不做显示，如果需要显示，可以使用自定义Builder显示。
8
9**示例：**
10```ts
11@Entry
12@Component
13struct Index {
14  build() {
15    Column() {
16      Navigation() {
17        Text('Navigation')
18      }.title("Navigation Menu")
19      .menus([
20        {icon: 'common/image/icon.png', value: 'menu1'},
21        {icon: 'common/image/icon.png', value: 'menu2'},
22        {icon: 'common/image/icon.png', value: 'menu3'}
23      ])
24    }
25  }
26}
27```
28API Version 9：menus的value属性会显示
29
30![Navigation](figures/navigation_menu_api9.png)
31
32API Version 10: menus中的value属性不显示
33![Navigation](figures/navigation_menu_api10.png)
34
35## cl.arkui.2 Navigation的titleMode属性Free模式默认显示位置变更
36
37**变更影响**
381. Navigation组件自定义标题并titleMode设置为Full模式或Free模式显示位置相同
392. 使用自定义title结合Free模式的标签会出现标签位置向右偏移
40
41**示例：**
42```ts
43@Entry
44@Component
45struct Index {
46  @Builder NavigationTile() {
47    Column() {
48      Text('title').fontColor('#182431').fontSize(30).lineHeight(41)
49      Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20)
50    }
51  }
52
53  build() {
54    Column() {
55      Navigation() {
56        Text('Navigation')
57      }.title(this.NavigationTitle)
58       .titleMode(NavigationTitleMode.Free)
59       .menus([
60        {icon: 'common/image/icon.png', value: 'menu1'}
61       ])
62    }
63  }
64}
65```
66
67API Version 9: Free模式显示位置
68
69![Navigation](figures/navigation_title_mode_free_sdk9.png)
70
71API Version 10: Free模式显示位置与Full模式显示位置相同
72
73![Navigation](figures/navigation_title_mode_free_sdk10.png)
74
75## cl.arkui.3 字符串异常值默认变更
76
77**变更影响**
78
79包含数字的非法字符串不会解析为数字部分，而是视为非法值，按照规则设定为默认值
80
81**示例：**
82```ts
83@Entry
84@Component
85struct GridRowExample {
86  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
87  @State currentBp: string = 'unknown'
88
89  build() {
90    Column() {
91      GridRow({
92        columns: 5,
93        gutter: { x: 5, y: 10 },
94        breakpoints: { value: ["400vp", "600vp", "800vp"],
95          reference: BreakpointsReference.WindowSize },
96        direction: GridRowDirection.Row
97      }) {
98        ForEach(this.bgColors, (color) => {
99          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
100            Row().width("100%").height("20vp")
101          }.borderColor(color).borderWidth(2)
102        })
103      }.width("100%").height("100%")
104    }.width("80pv").margin({ left: 10, top: 5, bottom: 5 }).height(200)
105    .border({ color: '#880606', width: 2 })
106  }
107}
108```
109
110API Version 9：上方示例中的GridRow设定width中的"80pv"会等同于width设定字符串"80"
111
112API Version 10: 上方示例中的GridRow的width中的"80pv"会被视为异常值，所以GridRow的width设定为默认值，相当于未设定
113
114## cl.arkui.4 Swiper的loop属性设置非法值时使用默认值true
115
116**变更影响**
117
118Swiper的loop属性设置非法值时原先使用false，现更改为true
119
120API Version 9: loop属性设置非法值时使用false
121
122API Version 10: loop属性设置非法值时使用true
123
124## cl.arkui.5 Swiper的翻页速度阈值由180px/s调整为1200px/s
125
126**变更影响**
127
128需要更快的速度才能满足翻页的条件
129
130## cl.arkui.6 Swiper的isShowBackground属性名称变更为showBackground
131
132**变更影响**
133
134Swiper组件中,是否显示底板的属性名称由isShowBackground变更为showBackground
135
136**示例：**
137
138```ts
139class MyDataSource implements IDataSource {
140  private list: number[] = []
141  private listener: DataChangeListener
142
143  constructor(list: number[]) {
144    this.list = list
145  }
146
147  totalCount(): number {
148    return this.list.length
149  }
150
151  getData(index: number): any {
152    return this.list[index]
153  }
154
155  registerDataChangeListener(listener: DataChangeListener): void {
156    this.listener = listener
157  }
158
159  unregisterDataChangeListener() {
160  }
161}
162
163@Entry
164@Component
165struct SwiperExample {
166  private swiperController: SwiperController = new SwiperController()
167  private data: MyDataSource = new MyDataSource([])
168
169  aboutToAppear(): void {
170    let list = []
171    for (var i = 1; i <= 10; i++) {
172      list.push(i.toString());
173    }
174    this.data = new MyDataSource(list)
175  }
176
177  build() {
178    Column({ space: 5 }) {
179      Swiper(this.swiperController) {
180        LazyForEach(this.data, (item: string) => {
181          Text(item)
182            .width('90%')
183            .height(160)
184            .backgroundColor(0xAFEEEE)
185            .textAlign(TextAlign.Center)
186            .fontSize(30)
187        }, item => item)
188      }
189      .cachedCount(2)
190      .index(1)
191      .autoPlay(true)
192      .indicator(true)
193      .displayArrow({
194        showBackground: true,
195        isSidebarMiddle: true,
196        backgroundSize: 24,
197        backgroundColor: Color.White,
198        arrowSize: 18,
199        arrowColor: Color.Blue
200      }, false)
201
202      Row({ space: 12 }) {
203        Button('showNext')
204          .onClick(() => {
205            this.swiperController.showNext()
206          })
207        Button('showPrevious')
208          .onClick(() => {
209            this.swiperController.showPrevious()
210          })
211      }.margin(5)
212    }.width('100%')
213    .margin({ top: 5 })
214  }
215}
216```
217
218## cl.arkui.7 Navigation menus最右图标距离右边缘间距变更
219
220**变更影响**
221
222menus整体向右侧偏移12vp，最右图标距离右边缘的间距由原36vp变更为24vp。
223
224## cl.arkui.8 像素取整变更
225
226**变更影响**
227
228对于有小数的坐标点和宽高值会四舍五入为整数。
229
230API Version 9：像素点坐标、控件宽高、边框宽度不会取整。
231
232API Version 10: 像素点坐标、控件宽高、边框宽度会取整。
233
234**示例：**
235```ts
236@Entry
237@Component
238struct Index {
239  build() {
240    Column() {
241      Row() {
242        Row() {
243          Row() {
244            Row() {
245              Row()
246                .width('100%')
247                .height('100%')
248                .border({width: '1', color: 'blue'})
249            }
250            .width('100%')
251            .height('100%')
252            .border({width: '1', color: 'red'})
253          }
254          .width('100%')
255          .height('100%')
256          .border({width: '1', color: 'blue'})
257        }
258        .width('100%')
259        .height('100%')
260        .border({width: '1', color: 'red'})
261      }
262      .width('81')
263      .height('81')
264      .border({width: '1', color: 'blue'})
265    }
266    .width('100%')
267    .height('100%')
268  }
269}
270```
271API Version 9：像素点坐标、控件宽高、边框宽度不会取整。
272
273![Navigation](figures/pixl_round_api9.png)
274
275API Version 10: 左边框、上边框宽度向上取整，右边框、下边框宽度向下取整。
276
277![Navigation](figures/pixl_round_api10.png)
278