1# ArkUI Subsystem Changelog
2
3
4## cl.arkui.1 Change in the Default Scrollbar State of \<List> and \<Gird> Components
5
6Changed the default state of the scrollbar in the **\<List>** and **\<Gird>** components from **BarState.Off** to **BarState.Auto**.
7
8**Change Impact**
9
10In the scenario where the scrollbar status is not set in the **\<List>** and **\<Gird>** components:
11
12Before change:
13
14The scrollbar is not displayed.
15
16After change:
17
18The scrollbar is displayed during scrolling and is hidden 2 seconds after the scrolling stops.
19
20**Key API/Component Changes**
21
22**scrollBar** attribute of the **\<List>** and **\<Gird>** components:
23- [List](../../../application-dev/reference/arkui-ts/ts-container-list.md#attributes)
24- [Grid](../../../application-dev/reference/arkui-ts/ts-container-grid.md#attributes)
25
26**Adaptation Guide**
27
28In scenarios where the scrollbar is not required, set the **scrollBar** attribute of the **\<List>** and **\<Gird>** components to **BarState.Off**.
29
30The code snippet is as follows:
31```ts
32// xxx.ets
33@Entry
34@Component
35struct ListItemExample {
36  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
37
38  build() {
39    Column() {
40      List({ space: 20, initialIndex: 0 }) {
41        ForEach(this.arr, (item) => {
42          ListItem() {
43            Text('' + item)
44              .width('100%').height(100).fontSize(16)
45              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
46          }
47        }, item => item)
48      }
49      .width('90%')
50      .scrollBar(BarState.Off)
51    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
52  }
53}
54```
55
56## cl.arkui.2 Fixing of the Stack Layout Issue
57
58Fixed the issue where child components in the [\<Stack>](../../../application-dev/reference/arkui-ts/ts-container-stack.md) container does not follow the **alignContent** settings when the child components stretch beyond the container.
59Example:
60
61```ts
62@Entry
63@Component
64struct StackExample {
65  build() {
66    Stack({alignContent:Alignment.TopEnd}){
67      Text('First child, show in bottom')
68        .width(200).height(200).backgroundColor(0xd2cab3).margin(10)
69    }.width(150).height(150).backgroundColor(Color.Pink).margin(100)
70  }
71}
72```
73Before: Child components are not arranged based on **alignContent:Alignment.TopEnd**.
74![stack](figures/stack_before.jpg)
75
76After: Child components are arranged based on **alignContent:Alignment.TopEnd**.
77![stack](figures/stack_after.jpg)
78
79
80**Change Impact**
81
821. When the **\<Stack>** component contains a child component larger than itself, adaptation to the application is required.
832. The previous workaround – **Offset** and **translate** settings for the child component – must be removed.
84
85**Adaptation Guide**
86
87Remove the **Offset** and **translate** settings for the child component.
88
89##  cl.arkui.3 Change in the \<Button> Component Hover Effect
90
91Changed the hover effect of the **\<Button>** component from scale-up by 100% to 105% to overlay of 0% to 5% opacity. Changed the pressed effect of the component to overlay of 5% to 10% opacity.
92
93**Change Impact**
94
95The visual effect of the **\<Button>** is affected.
96