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