【鸿蒙next开辟】ArkUI框架：ArkTS组件-FoldSplitContainer

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

• 鸿蒙开辟核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习门路
  
• 鸿蒙HarmonyOS NEXT开辟技术最全学习门路指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）
  

---

FoldSplitContainer

FoldSplitContainer分栏结构，实现折叠屏二分栏、三分栏在展开态、悬停态以及折叠态的地区控制。
   说明
  该组件从API Version 12开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  子组件

无
FoldSplitContainer

FoldSplitContainer({
primary: Callback<void>,
secondary: Callback<void>,
extra?: Callback<void>,
expandedLayoutOptions: ExpandedRegionLayoutOptions,
hoverModeLayoutOptions: HoverModeRegionLayoutOptions,
foldedLayoutOptions: FoldedRegionLayoutOptions,
animationOptions?: AnimateParam,
onHoverStatusChange?: OnHoverStatusChangeHandler
})
装饰器范例：@Component
元服务API： 从API version 12开始，该接口支持在元服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
名称参数范例必填装饰器范例说明primary()=>void是@BuilderParam重要地区回调函数。secondary()=>void是@BuilderParam次要地区回调函数。extra()=>void否@BuilderParam扩展地区回调函数，不传入的环境，没有对应地区。expandedLayoutOptionsExpandedRegionLayoutOptions是@Prop展开态结构信息。hoverModeLayoutOptionsHoverModeRegionLayoutOptions是@Prop悬停态结构信息。foldedLayoutOptionsFoldedRegionLayoutOptions是@Prop折叠态结构信息。animationOptionsAnimateParam | null否@Prop设置动画效果相关的参数，null表现表现关闭动效。onHoverStatusChangeOnHoverStatusChangeHandler否-折叠屏进入或退出悬停模式时触发的回调函数。 ExpandedRegionLayoutOptions

装饰器范例：@Prop
元服务API： 从API version 12开始，该接口支持在元服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
展开态结构信息。
名称范例必填说明isExtraRegionPerpendicularboolean否扩展地区是否从上到下贯穿整个组件，当且仅当extra有效时此字段才生效。默认值：true。verticalSplitRationumber否重要地区与次要地区之间的高度比例。默认值：PresetSplitRatio.LAYOUT_1V1。horizontalSplitRationumber否重要地区与扩展地区之间的宽度比例，当且仅当extra有效时此字段才生效。默认值：PresetSplitRatio.LAYOUT_3V2。extraRegionPositionExtraRegionPosition否扩展地区的位置信息，当且仅当isExtraRegionPerpendicular = false有效时此字段才生效。默认值：ExtraRegionPosition.top。 HoverModeRegionLayoutOptions

装饰器范例：@Prop
元服务API： 从API version 12开始，该接口支持在元服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
悬停态结构信息。
名称范例必填说明showExtraRegionboolean否可折叠屏幕在半折叠状态下是否显示扩展地区。默认值：false。horizontalSplitRationumber否重要地区与扩展地区之间的宽度比例，当且仅当extra有效时此字段才生效。默认值：PresetSplitRatio.LAYOUT_3V2。extraRegionPositionExtraRegionPosition否扩展地区的位置信息，当且仅当showExtraRegion时此字段才生效。默认值：ExtraRegionPosition.top。   说明
  1.装备处于悬停态时，存在避让地区，结构计算需要考虑避让地区对结构的影响。
  2.在悬停模式下，屏幕上半部分用于显示，下半部分用于操作。
  FoldedRegionLayoutOptions

装饰器范例：@Prop
元服务API： 从API version 12开始，该接口支持在元服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
折叠态结构信息。
名称范例必填说明verticalSplitRationumber是重要地区与次要地区之间的高度比例。默认值：PresetSplitRatio.LAYOUT_1V1。 OnHoverStatusChangeHandler

元服务API： 从API version 12开始，该接口支持在元服务中利用。
onHoverStatusChange事故处理。
名称范例必填说明callback(status: HoverModeStatus) => void是折叠屏进入或退出悬停模式时触发的回调函数。 HoverModeStatus

元服务API： 从API version 12开始，该接口支持在元服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
折叠态结构信息。
名称范例必填说明foldStatusFoldStatus10+是装备的折叠状态。isHoverModeboolean是app当前是否处于悬停态。appRotationnumber是应用旋转角度。windowStatusTypeWindowStatusType11+是窗口模式。 ExtraRegionPosition

元服务API： 从API version 12开始，该接口支持在元服务中利用。
扩展地区位置信息。
名称值描述top1扩展地区在组件上半地区。bottom2扩展地区在组件下半地区。 PresetSplitRatio

元服务API： 从API version 12开始，该接口支持在元服务中利用。
地区比例。
名称值描述LAYOUT_1V111:1比例。LAYOUT_3V21.53:2比例。LAYOUT_2V30.66666666666666662:3比例。 示例

示例1（设置二分栏）

该示例实现了折叠屏二分栏在展开态、悬停态以及折叠态的地区控制。

1. import { FoldSplitContainer } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct TwoColumns {
7.   @Builder
8.   privateRegion() {
9.     Text("Primary")
10.       .backgroundColor('rgba(255, 0, 0, 0.1)')
11.       .fontSize(28)
12.       .textAlign(TextAlign.Center)
13.       .height('100%')
14.       .width('100%')
15.   }
18.   @Builder
19.   secondaryRegion() {
20.     Text("Secondary")
21.       .backgroundColor('rgba(0, 255, 0, 0.1)')
22.       .fontSize(28)
23.       .textAlign(TextAlign.Center)
24.       .height('100%')
25.       .width('100%')
26.   }
29.   build() {
30.     RelativeContainer() {
31.       FoldSplitContainer({
32.         primary: () => {
33.           this.privateRegion()
34.         },
35.         secondary: () => {
36.           this.secondaryRegion()
37.         }
38.       })
39.     }
40.     .height('100%')
41.     .width('100%')
42.   }
43. }

复制代码

折叠态展开态悬停态

  

  

  示例2（设置三分栏）

该示例实现了折叠屏三分栏在展开态、悬停态以及折叠态的地区控制。

1. import { FoldSplitContainer } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct ThreeColumns {
7.   @Builder
8.   privateRegion() {
9.     Text("Primary")
10.       .backgroundColor('rgba(255, 0, 0, 0.1)')
11.       .fontSize(28)
12.       .textAlign(TextAlign.Center)
13.       .height('100%')
14.       .width('100%')
15.   }
18.   @Builder
19.   secondaryRegion() {
20.     Text("Secondary")
21.       .backgroundColor('rgba(0, 255, 0, 0.1)')
22.       .fontSize(28)
23.       .textAlign(TextAlign.Center)
24.       .height('100%')
25.       .width('100%')
26.   }
29.   @Builder
30.   extraRegion() {
31.     Text("Extra")
32.       .backgroundColor('rgba(0, 0, 255, 0.1)')
33.       .fontSize(28)
34.       .textAlign(TextAlign.Center)
35.       .height('100%')
36.       .width('100%')
37.   }
40.   build() {
41.     RelativeContainer() {
42.       FoldSplitContainer({
43.         primary: () => {
44.           this.privateRegion()
45.         },
46.         secondary: () => {
47.           this.secondaryRegion()
48.         },
49.         extra: () => {
50.           this.extraRegion()
51.         }
52.       })
53.     }
54.     .height('100%')
55.     .width('100%')
56.   }
57. }

复制代码

折叠态展开态悬停态

  

  

  示例3（展开态结构信息）

该示例通过设置ExpandedRegionLayoutOptions实现折叠屏展开态的结构信息。

1. import {
2.   FoldSplitContainer,
3.   PresetSplitRatio,
4.   ExtraRegionPosition,
5.   ExpandedRegionLayoutOptions,
6.   HoverModeRegionLayoutOptions,
7.   FoldedRegionLayoutOptions
8. } from '@kit.ArkUI';
11. @Component
12. struct Region {
13.   @Prop title: string;
14.   @BuilderParam content: () => void;
15.   @Prop compBackgroundColor: string;
18.   build() {
19.     Column({ space: 8 }) {
20.       Text(this.title)
21.         .fontSize("24fp")
22.         .fontWeight(600)
25.       Scroll() {
26.         this.content()
27.       }
28.       .layoutWeight(1)
29.       .width("100%")
30.     }
31.     .backgroundColor(this.compBackgroundColor)
32.     .width("100%")
33.     .height("100%")
34.     .padding(12)
35.   }
36. }
39. const noop = () => {
40. };
43. @Component
44. struct SwitchOption {
45.   @Prop label: string = ""
46.   @Prop value: boolean = false
47.   public onChange: (checked: boolean) => void = noop;
50.   build() {
51.     Row() {
52.       Text(this.label)
53.       Blank()
54.       Toggle({ type: ToggleType.Switch, isOn: this.value })
55.         .onChange((isOn) => {
56.           this.onChange(isOn);
57.         })
58.     }
59.     .backgroundColor(Color.White)
60.     .borderRadius(8)
61.     .padding(8)
62.     .width("100%")
63.   }
64. }
67. interface RadioOptions {
68.   label: string;
69.   value: Object | undefined | null;
70.   onChecked: () => void;
71. }
74. @Component
75. struct RadioOption {
76.   @Prop label: string;
77.   @Prop value: Object | undefined | null;
78.   @Prop options: Array<RadioOptions>;
81.   build() {
82.     Row() {
83.       Text(this.label)
84.       Blank()
85.       Column({ space: 4 }) {
86.         ForEach(this.options, (option: RadioOptions) => {
87.           Row() {
88.             Radio({
89.               group: this.label,
90.               value: JSON.stringify(option.value),
91.             })
92.               .checked(this.value === option.value)
93.               .onChange((checked) => {
94.                 if (checked) {
95.                   option.onChecked();
96.                 }
97.               })
98.             Text(option.label)
99.           }
100.         })
101.       }
102.       .alignItems(HorizontalAlign.Start)
103.     }
104.     .alignItems(VerticalAlign.Top)
105.     .backgroundColor(Color.White)
106.     .borderRadius(8)
107.     .padding(8)
108.     .width("100%")
109.   }
110. }
113. @Entry
114. @Component
115. struct Index {
116.   @State expandedRegionLayoutOptions: ExpandedRegionLayoutOptions = {
117.     horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2,
118.     verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1,
119.     isExtraRegionPerpendicular: true,
120.     extraRegionPosition: ExtraRegionPosition.TOP
121.   };
122.   @State foldingRegionLayoutOptions: HoverModeRegionLayoutOptions = {
123.     horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2,
124.     showExtraRegion: false,
125.     extraRegionPosition: ExtraRegionPosition.TOP
126.   };
127.   @State foldedRegionLayoutOptions: FoldedRegionLayoutOptions = {
128.     verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1
129.   };
132.   @Builder
133.   MajorRegion() {
134.     Region({
135.       title: "折叠态配置",
136.       compBackgroundColor: "rgba(255, 0, 0, 0.1)",
137.     }) {
138.       Column({ space: 4 }) {
139.         RadioOption({
140.           label: "折叠态垂直高度度比",
141.           value: this.foldedRegionLayoutOptions.verticalSplitRatio,
142.           options: [
143.             {
144.               label: "1:1",
145.               value: PresetSplitRatio.LAYOUT_1V1,
146.               onChecked: () => {
147.                 this.foldedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_1V1
148.               }
149.             },
150.             {
151.               label: "2:3",
152.               value: PresetSplitRatio.LAYOUT_2V3,
153.               onChecked: () => {
154.                 this.foldedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_2V3
155.               }
156.             },
157.             {
158.               label: "3:2",
159.               value: PresetSplitRatio.LAYOUT_3V2,
160.               onChecked: () => {
161.                 this.foldedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_3V2
162.               }
163.             },
164.             {
165.               label: "未定义",
166.               value: undefined,
167.               onChecked: () => {
168.                 this.foldedRegionLayoutOptions.verticalSplitRatio = undefined
169.               }
170.             }
171.           ]
172.         })
173.       }
174.       .constraintSize({ minHeight: "100%" })
175.     }
176.   }
179.   @Builder
180.   MinorRegion() {
181.     Region({
182.       title: "悬停态配置",
183.       compBackgroundColor: "rgba(0, 255, 0, 0.1)"
184.     }) {
185.       Column({ space: 4 }) {
186.         RadioOption({
187.           label: "悬停态水平宽度比",
188.           value: this.foldingRegionLayoutOptions.horizontalSplitRatio,
189.           options: [
190.             {
191.               label: "1:1",
192.               value: PresetSplitRatio.LAYOUT_1V1,
193.               onChecked: () => {
194.                 this.foldingRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_1V1
195.               }
196.             },
197.             {
198.               label: "2:3",
199.               value: PresetSplitRatio.LAYOUT_2V3,
200.               onChecked: () => {
201.                 this.foldingRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_2V3
202.               }
203.             },
204.             {
205.               label: "3:2",
206.               value: PresetSplitRatio.LAYOUT_3V2,
207.               onChecked: () => {
208.                 this.foldingRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_3V2
209.               }
210.             },
211.             {
212.               label: "未定义",
213.               value: undefined,
214.               onChecked: () => {
215.                 this.foldingRegionLayoutOptions.horizontalSplitRatio = undefined
216.               }
217.             },
218.           ]
219.         })
222.         SwitchOption({
223.           label: "悬停态是否显示扩展区",
224.           value: this.foldingRegionLayoutOptions.showExtraRegion,
225.           onChange: (checked) => {
226.             this.foldingRegionLayoutOptions.showExtraRegion = checked;
227.           }
228.         })
231.         if (this.foldingRegionLayoutOptions.showExtraRegion) {
232.           RadioOption({
233.             label: "悬停态扩展区位置",
234.             value: this.foldingRegionLayoutOptions.extraRegionPosition,
235.             options: [
236.               {
237.                 label: "顶部",
238.                 value: ExtraRegionPosition.TOP,
239.                 onChecked: () => {
240.                   this.foldingRegionLayoutOptions.extraRegionPosition = ExtraRegionPosition.TOP
241.                 }
242.               },
243.               {
244.                 label: "底部",
245.                 value: ExtraRegionPosition.BOTTOM,
246.                 onChecked: () => {
247.                   this.foldingRegionLayoutOptions.extraRegionPosition = ExtraRegionPosition.BOTTOM
248.                 }
249.               },
250.               {
251.                 label: "未定义",
252.                 value: undefined,
253.                 onChecked: () => {
254.                   this.foldingRegionLayoutOptions.extraRegionPosition = undefined
255.                 }
256.               },
257.             ]
258.           })
259.         }
260.       }
261.       .constraintSize({ minHeight: "100%" })
262.     }
263.   }
266.   @Builder
267.   ExtraRegion() {
268.     Region({
269.       title: "展开态配置",
270.       compBackgroundColor: "rgba(0, 0, 255, 0.1)"
271.     }) {
272.       Column({ space: 4 }) {
273.         RadioOption({
274.           label: "展开态水平宽度比",
275.           value: this.expandedRegionLayoutOptions.horizontalSplitRatio,
276.           options: [
277.             {
278.               label: "1:1",
279.               value: PresetSplitRatio.LAYOUT_1V1,
280.               onChecked: () => {
281.                 this.expandedRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_1V1
282.               }
283.             },
284.             {
285.               label: "2:3",
286.               value: PresetSplitRatio.LAYOUT_2V3,
287.               onChecked: () => {
288.                 this.expandedRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_2V3
289.               }
290.             },
291.             {
292.               label: "3:2",
293.               value: PresetSplitRatio.LAYOUT_3V2,
294.               onChecked: () => {
295.                 this.expandedRegionLayoutOptions.horizontalSplitRatio = PresetSplitRatio.LAYOUT_3V2
296.               }
297.             },
298.             {
299.               label: "未定义",
300.               value: undefined,
301.               onChecked: () => {
302.                 this.expandedRegionLayoutOptions.horizontalSplitRatio = undefined
303.               }
304.             },
305.           ]
306.         })
309.         RadioOption({
310.           label: "展开态垂直高度度比",
311.           value: this.expandedRegionLayoutOptions.verticalSplitRatio,
312.           options: [
313.             {
314.               label: "1:1",
315.               value: PresetSplitRatio.LAYOUT_1V1,
316.               onChecked: () => {
317.                 this.expandedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_1V1
318.               }
319.             },
320.             {
321.               label: "2:3",
322.               value: PresetSplitRatio.LAYOUT_2V3,
323.               onChecked: () => {
324.                 this.expandedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_2V3
325.               }
326.             },
327.             {
328.               label: "3:2",
329.               value: PresetSplitRatio.LAYOUT_3V2,
330.               onChecked: () => {
331.                 this.expandedRegionLayoutOptions.verticalSplitRatio = PresetSplitRatio.LAYOUT_3V2
332.               }
333.             },
334.             {
335.               label: "未定义",
336.               value: undefined,
337.               onChecked: () => {
338.                 this.expandedRegionLayoutOptions.verticalSplitRatio = undefined
339.               }
340.             }
341.           ]
342.         })
345.         SwitchOption({
346.           label: "展开态扩展区是否上下贯穿",
347.           value: this.expandedRegionLayoutOptions.isExtraRegionPerpendicular,
348.           onChange: (checked) => {
349.             this.expandedRegionLayoutOptions.isExtraRegionPerpendicular = checked;
350.           }
351.         })
354.         if (!this.expandedRegionLayoutOptions.isExtraRegionPerpendicular) {
355.           RadioOption({
356.             label: "展开态扩展区位置",
357.             value: this.expandedRegionLayoutOptions.extraRegionPosition,
358.             options: [
359.               {
360.                 label: "顶部",
361.                 value: ExtraRegionPosition.TOP,
362.                 onChecked: () => {
363.                   this.expandedRegionLayoutOptions.extraRegionPosition = ExtraRegionPosition.TOP
364.                 }
365.               },
366.               {
367.                 label: "底部",
368.                 value: ExtraRegionPosition.BOTTOM,
369.                 onChecked: () => {
370.                   this.expandedRegionLayoutOptions.extraRegionPosition = ExtraRegionPosition.BOTTOM
371.                 }
372.               },
373.               {
374.                 label: "未定义",
375.                 value: undefined,
376.                 onChecked: () => {
377.                   this.expandedRegionLayoutOptions.extraRegionPosition = undefined
378.                 }
379.               },
380.             ]
381.           })
382.         }
383.       }
384.       .constraintSize({ minHeight: "100%" })
385.     }
386.   }
389.   build() {
390.     Column() {
391.       FoldSplitContainer({
392.         primary: () => {
393.           this.MajorRegion()
394.         },
395.         secondary: () => {
396.           this.MinorRegion()
397.         },
398.         extra: () => {
399.           this.ExtraRegion()
400.         },
401.         expandedLayoutOptions: this.expandedRegionLayoutOptions,
402.         hoverModeLayoutOptions: this.foldingRegionLayoutOptions,
403.         foldedLayoutOptions: this.foldedRegionLayoutOptions,
404.       })
405.     }
406.     .width("100%")
407.     .height("100%")
408.   }
409. }

复制代码

折叠态展开态悬停态

  

  

  

  

  

  

  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。