HarmonyOS 6 FoldSplitContainer 多形态布局配置使用文档

文章目录概述依赖导入核心类型与参数1. 布局配置结构体2. 枚举说明3. 组件核心入参分形态配置功能解析1. 折叠态配置2. 悬停态配置3. 展开态配置代码总结概述FoldSplitContainer适配折叠屏设备可分别对折叠态、悬停态、展开态三种机身形态独立配置分栏比例、扩展区显隐与排布位置。支持预设分割比例、扩展区域方位切换搭配交互控件实时修改布局参数动态预览不同形态下页面分栏展示效果适用于折叠屏多场景自适应页面开发。依赖导入import { FoldSplitContainer, PresetSplitRatio, ExtraRegionPosition, ExpandedRegionLayoutOptions, HoverModeRegionLayoutOptions, FoldedRegionLayoutOptions } from kit.ArkUI;核心类型与参数1. 布局配置结构体结构体作用ExpandedRegionLayoutOptions大屏展开态布局参数HoverModeRegionLayoutOptions悬停弯折态布局参数FoldedRegionLayoutOptions机身折叠态布局参数2. 枚举说明PresetSplitRatio预设分栏比例支持1V1、2V3、3V2可置空使用系统默认比例ExtraRegionPosition扩展区域方位TOP顶部、BOTTOM底部3. 组件核心入参参数释义primary主内容区域构建器secondary次要内容区域构建器extra扩展内容区域构建器expandedLayoutOptions展开态全局配置hoverModeLayoutOptions悬停态全局配置foldedLayoutOptions折叠态全局配置分形态配置功能解析1. 折叠态配置仅支持垂直方向分栏比例调节提供1:1、2:3、3:2三种预设比例也可恢复系统默认布局。切换单选选项可即时变更折叠收拢状态下上下区域占比。foldedRegionLayoutOptions: FoldedRegionLayoutOptions { verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1 };2. 悬停态配置调节水平分栏宽度比例开关控制扩展区域是否展示扩展区启用后可选择顶部、底部摆放位置弯折悬停状态下分栏尺寸与附加区域排布跟随参数动态变化。foldingRegionLayoutOptions: HoverModeRegionLayoutOptions { horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2, showExtraRegion: false, extraRegionPosition: ExtraRegionPosition.TOP };3. 展开态配置分别配置水平、垂直双向分割比例开关控制扩展区是否纵向贯穿排布非贯穿模式下自定义扩展区顶部、底部位置大屏完全展开时按照配置参数自动划分三栏布局空间。expandedRegionLayoutOptions: ExpandedRegionLayoutOptions { horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2, verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1, isExtraRegionPerpendicular: true, extraRegionPosition: ExtraRegionPosition.TOP };代码import { FoldSplitContainer, PresetSplitRatio, ExtraRegionPosition, ExpandedRegionLayoutOptions, HoverModeRegionLayoutOptions, FoldedRegionLayoutOptions } from kit.ArkUI; Component struct Region { Prop title: string; BuilderParam content: () void; Prop compBackgroundColor: string; build() { Column({ space: 8 }) { Text(this.title) .fontSize(24fp) .fontWeight(600) Scroll() { this.content() } .layoutWeight(1) .width(100%) } .backgroundColor(this.compBackgroundColor) .width(100%) .height(100%) .padding(12) } } const noop () { }; Component struct SwitchOption { Prop label: string Prop value: boolean false public onChange: (checked: boolean) void noop; build() { Row() { Text(this.label) Blank() Toggle({ type: ToggleType.Switch, isOn: this.value }) .onChange((isOn) { this.onChange(isOn); }) } .backgroundColor(Color.White) .borderRadius(8) .padding(8) .width(100%) } } interface RadioOptions { label: string; value: Object | undefined | null; onChecked: () void; } Component struct RadioOption { Prop label: string; Prop value: Object | undefined | null; Prop options: ArrayRadioOptions; build() { Row() { Text(this.label) Blank() Column({ space: 4 }) { ForEach(this.options, (option: RadioOptions) { Row() { Radio({ group: this.label, value: JSON.stringify(option.value), }) .checked(this.value option.value) .onChange((checked) { if (checked) { option.onChecked(); } }) Text(option.label) } }) } .alignItems(HorizontalAlign.Start) } .alignItems(VerticalAlign.Top) .backgroundColor(Color.White) .borderRadius(8) .padding(8) .width(100%) } } Entry Component struct Index { // 展开态布局配置 State expandedRegionLayoutOptions: ExpandedRegionLayoutOptions { horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2, verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1, isExtraRegionPerpendicular: true, extraRegionPosition: ExtraRegionPosition.TOP }; // 悬停态布局配置 State foldingRegionLayoutOptions: HoverModeRegionLayoutOptions { horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2, showExtraRegion: false, extraRegionPosition: ExtraRegionPosition.TOP }; // 折叠态布局配置 State foldedRegionLayoutOptions: FoldedRegionLayoutOptions { verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1 }; Builder // 主要区域自定义组件 MajorRegion() { Region({ title: 折叠态配置, compBackgroundColor: rgba(255, 0, 0, 0.1), }) { Column({ space: 4 }) { RadioOption({ label: 折叠态垂直高度比, value: this.foldedRegionLayoutOptions.verticalSplitRatio, options: [ { label: 1:1, value: PresetSplitRatio.LAYOUT_1V1, onChecked: () { this.foldedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_1V1 } }, { label: 2:3, value: PresetSplitRatio.LAYOUT_2V3, onChecked: () { this.foldedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_2V3 } }, { label: 3:2, value: PresetSplitRatio.LAYOUT_3V2, onChecked: () { this.foldedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_3V2 } }, { label: 未定义, value: undefined, onChecked: () { this.foldedRegionLayoutOptions.verticalSplitRatio undefined } } ] }) } .constraintSize({ minHeight: 100% }) } } Builder // 次要区域自定义组件 MinorRegion() { Region({ title: 悬停态配置, compBackgroundColor: rgba(0, 255, 0, 0.1) }) { Column({ space: 4 }) { RadioOption({ label: 悬停态水平宽度比, value: this.foldingRegionLayoutOptions.horizontalSplitRatio, options: [ { label: 1:1, value: PresetSplitRatio.LAYOUT_1V1, onChecked: () { this.foldingRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_1V1 } }, { label: 2:3, value: PresetSplitRatio.LAYOUT_2V3, onChecked: () { this.foldingRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_2V3 } }, { label: 3:2, value: PresetSplitRatio.LAYOUT_3V2, onChecked: () { this.foldingRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_3V2 } }, { label: 未定义, value: undefined, onChecked: () { this.foldingRegionLayoutOptions.horizontalSplitRatio undefined } }, ] }) SwitchOption({ label: 悬停态是否显示扩展区, value: this.foldingRegionLayoutOptions.showExtraRegion, onChange: (checked) { this.foldingRegionLayoutOptions.showExtraRegion checked; } }) if (this.foldingRegionLayoutOptions.showExtraRegion) { RadioOption({ label: 悬停态扩展区位置, value: this.foldingRegionLayoutOptions.extraRegionPosition, options: [ { label: 顶部, value: ExtraRegionPosition.TOP, onChecked: () { this.foldingRegionLayoutOptions.extraRegionPosition ExtraRegionPosition.TOP } }, { label: 底部, value: ExtraRegionPosition.BOTTOM, onChecked: () { this.foldingRegionLayoutOptions.extraRegionPosition ExtraRegionPosition.BOTTOM } }, { label: 未定义, value: undefined, onChecked: () { this.foldingRegionLayoutOptions.extraRegionPosition undefined } }, ] }) } } .constraintSize({ minHeight: 100% }) } } Builder // 扩展区域自定义组件 ExtraRegion() { Region({ title: 展开态配置, compBackgroundColor: rgba(0, 0, 255, 0.1) }) { Column({ space: 4 }) { RadioOption({ label: 展开态水平宽度比, value: this.expandedRegionLayoutOptions.horizontalSplitRatio, options: [ { label: 1:1, value: PresetSplitRatio.LAYOUT_1V1, onChecked: () { this.expandedRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_1V1 } }, { label: 2:3, value: PresetSplitRatio.LAYOUT_2V3, onChecked: () { this.expandedRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_2V3 } }, { label: 3:2, value: PresetSplitRatio.LAYOUT_3V2, onChecked: () { this.expandedRegionLayoutOptions.horizontalSplitRatio PresetSplitRatio.LAYOUT_3V2 } }, { label: 未定义, value: undefined, onChecked: () { this.expandedRegionLayoutOptions.horizontalSplitRatio undefined } }, ] }) RadioOption({ label: 展开态垂直高度比, value: this.expandedRegionLayoutOptions.verticalSplitRatio, options: [ { label: 1:1, value: PresetSplitRatio.LAYOUT_1V1, onChecked: () { this.expandedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_1V1 } }, { label: 2:3, value: PresetSplitRatio.LAYOUT_2V3, onChecked: () { this.expandedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_2V3 } }, { label: 3:2, value: PresetSplitRatio.LAYOUT_3V2, onChecked: () { this.expandedRegionLayoutOptions.verticalSplitRatio PresetSplitRatio.LAYOUT_3V2 } }, { label: 未定义, value: undefined, onChecked: () { this.expandedRegionLayoutOptions.verticalSplitRatio undefined } } ] }) SwitchOption({ label: 展开态扩展区是否上下贯穿, value: this.expandedRegionLayoutOptions.isExtraRegionPerpendicular, onChange: (checked) { this.expandedRegionLayoutOptions.isExtraRegionPerpendicular checked; } }) if (!this.expandedRegionLayoutOptions.isExtraRegionPerpendicular) { RadioOption({ label: 展开态扩展区位置, value: this.expandedRegionLayoutOptions.extraRegionPosition, options: [ { label: 顶部, value: ExtraRegionPosition.TOP, onChecked: () { this.expandedRegionLayoutOptions.extraRegionPosition ExtraRegionPosition.TOP } }, { label: 底部, value: ExtraRegionPosition.BOTTOM, onChecked: () { this.expandedRegionLayoutOptions.extraRegionPosition ExtraRegionPosition.BOTTOM } }, { label: 未定义, value: undefined, onChecked: () { this.expandedRegionLayoutOptions.extraRegionPosition undefined } }, ] }) } } .constraintSize({ minHeight: 100% }) } } build() { Column() { FoldSplitContainer({ // 主要区域回调函数 primary: () { this.MajorRegion() }, // 次要区域回调函数 secondary: () { this.MinorRegion() }, // 扩展区域回调函数 extra: () { this.ExtraRegion() }, expandedLayoutOptions: this.expandedRegionLayoutOptions, hoverModeLayoutOptions: this.foldingRegionLayoutOptions, foldedLayoutOptions: this.foldedRegionLayoutOptions, }) } .width(100%) .height(100%) } }运行效果如图总结最低支持API12版本仅适配Stage工程模型不支持穿戴设备三种形态配置相互独立修改单类参数不会影响其他形态布局分栏比例置空时组件自动采用系统原生默认分割规则扩展区贯穿模式与自定义方位互斥关闭贯穿才可选择上下位置状态变量绑定控件修改参数实时同步至布局动态生效无需刷新页面。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力