1# FolderStack
2
3FolderStack继承于Stack(层叠布局)控件，新增了折叠屏悬停能力，通过识别upperItems自动避让折叠屏折痕区后移到上半屏
4
5>  **说明：**
6>
7>  该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含多个子组件。
13
14
15## 接口
16
17FolderStack(value?: { upperItems?:  Array<string\> })
18
19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名       | 类型                                    | 必填 | 说明                                                                 |
26| ------------ | ------------------------------------------- | ---- |----------------------------------------------------------------------|
27| value |  { upperItems?:  Array<string\> } | 否   | FolderStack的配置项。<br/>-&nbsp;upperItems：定义悬停态会被移到上半屏的子组件的id，组件id在此数组中的子组件悬停触发时自动避让折叠屏折痕区后移到上半屏，其它组件堆叠在下半屏区域。 |
28
29
30
31## 属性
32
33除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
34
35### alignContent
36
37alignContent(value: Alignment)
38
39设置子组件在容器内的对齐方式。该属性与[通用属性align](ts-universal-attributes-location.md)同时设置时，后设置的属性生效。
40
41**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
42
43**系统能力：** SystemCapability.ArkUI.ArkUI.Full
44
45**参数：**
46
47| 参数名 | 类型                                        | 必填 | 说明                                                    |
48| ------ | ------------------------------------------- | ---- | ------------------------------------------------------- |
49| value  | [Alignment](ts-appendix-enums.md#alignment) | 是   | 子组件在容器内的对齐方式。<br/>默认值：Alignment.Center |
50
51### enableAnimation
52
53enableAnimation(value: boolean)
54
55设置是否使用默认动效。
56
57**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
58
59**系统能力：** SystemCapability.ArkUI.ArkUI.Full
60
61**参数：**
62
63| 参数名 | 类型                                        | 必填 | 说明                                |
64| ------ | ------------------------------------------- | ---- | ----------------------------------- |
65| value  | boolean | 是   | 是否使用默认动效。<br/>默认值：true |
66
67### autoHalfFold
68
69autoHalfFold(value: boolean)
70
71设置是否开启自动旋转，仅在系统自动旋转关闭时该属性生效。
72
73**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
74
75**系统能力：** SystemCapability.ArkUI.ArkUI.Full
76
77**参数：**
78
79| 参数名 | 类型    | 必填 | 说明                                |
80| ------ | ------- | ---- | ----------------------------------- |
81| value  | boolean | 是   | 是否开启自动旋转。<br/>默认值：true |
82
83>  **说明：**
84>
85>  设置offset和margin属性，可能会导致上下半屏遮挡折痕区，不建议开发者使用。
86
87## 事件
88
89除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
90
91### onFolderStateChange
92
93onFolderStateChange(callback: (event: { foldStatus: FoldStatus }) => void)
94
95当折叠状态改变的时候回调，仅在横屏状态下生效。
96
97**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
98
99**系统能力：** SystemCapability.ArkUI.ArkUI.Full
100
101**参数：**
102
103| 参数名     | 类型                                            | 必填 | 说明                 |
104| ---------- | ----------------------------------------------- | ---- | -------------------- |
105| foldStatus | [FoldStatus](ts-appendix-enums.md#foldstatus11) | 是   | 当前设备的折叠状态。 |
106
107
108### onHoverStatusChange<sup>12+</sup>
109
110onHoverStatusChange(handler: (param: HoverEventParam) => void)
111
112当悬停状态改变的时候回调。
113
114**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
115
116**系统能力：** SystemCapability.ArkUI.ArkUI.Full
117
118**参数：**
119
120| 参数名     | 类型                                            | 必填 | 说明                 |
121| ---------- | ----------------------------------------------- | ---- | -------------------- |
122| handler | (param: [HoverEventParam](#hovereventparam12对象说明)) => void | 是   | 当悬停状态改变的时候触发回调。 |
123
124## HoverEventParam<sup>12+</sup>对象说明
125
126**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
127
128**系统能力：** SystemCapability.ArkUI.ArkUI.Full
129
130| 名称              | 类型                                                          | 必填 | 说明         |
131|------------------|-------------------------------------------------------------| --- |------------|
132| foldStatus       | [FoldStatus](ts-appendix-enums.md#foldstatus11)             | 是   | 当前设备的折叠状态。 |
133| isHoverMode      | boolean                                                     | 是   | 当前是否悬停模式。  |
134| appRotation      | [AppRotation](ts-appendix-enums.md#approtation12)           | 是   | 当前应用方向。    |
135| windowStatusType | [WindowStatusType](../js-apis-window.md#windowstatustype11) | 是   | 窗口模式枚举。    |
136
137## 示例
138
139```ts
140@Entry
141@Component
142struct Index {
143  @State len_wid: number = 480
144  @State w: string = "40%"
145  build() {
146    Column() {
147      // upperItems将所需要的悬停到上半屏的id放入upperItems传入，其余组件会堆叠在下半屏区域
148      FolderStack({ upperItems: ["upperitemsId"] }) {
149        // 此Column会自动上移到上半屏
150        Column() {
151          Text("video zone").height("100%").width("100%").textAlign(TextAlign.Center).fontSize(25)
152        }.backgroundColor(Color.Pink).width("100%").height("100%").id("upperitemsId")
153
154        // 下列两个Column堆叠在下半屏区域
155        Column() {
156          Text("video title")
157            .width("100%")
158            .height(50)
159            .textAlign(TextAlign.Center)
160            .backgroundColor(Color.Red)
161            .fontSize(25)
162        }.width("100%").height("100%").justifyContent(FlexAlign.Start)
163
164        Column() {
165          Text("video bar ")
166            .width("100%")
167            .height(50)
168            .textAlign(TextAlign.Center)
169            .backgroundColor(Color.Red)
170            .fontSize(25)
171        }.width("100%").height("100%").justifyContent(FlexAlign.End)
172      }
173      .backgroundColor(Color.Yellow)
174      // 是否启动动效
175      .enableAnimation(true)
176      // 是否自动旋转
177      .autoHalfFold(true)
178      // folderStack回调 当折叠状态改变时回调
179      .onFolderStateChange((msg) => {
180        if (msg.foldStatus === FoldStatus.FOLD_STATUS_EXPANDED) {
181          console.info("The device is currently in the expanded state")
182        } else if (msg.foldStatus === FoldStatus.FOLD_STATUS_HALF_FOLDED) {
183          console.info("The device is currently in the half folded state")
184        } else {
185          // .............
186        }
187      })
188      // hoverStatusChange回调 当悬停状态改变时回调
189      .onHoverStatusChange((msg) => {
190        console.log('this foldStatus:' +msg.foldStatus);
191        console.log('this isHoverMode:' +msg.isHoverMode);
192        console.log('this appRotation:' +msg.appRotation);
193        console.log('this windowStatusType:' +msg.windowStatusType);
194      })
195      // folderStack如果不撑满页面全屏，作为普通Stack使用
196      .alignContent(Alignment.Bottom)
197      .height("100%")
198      .width("100%")
199      .borderWidth(1)
200      .backgroundColor(Color.Yellow)
201
202    }
203    .height("100%")
204    .width("100%")
205    .borderWidth(1)
206    .backgroundColor(Color.Pink)
207    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
208
209  }
210}
211```