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