【鸿蒙next开辟】ArkUI框架：ArkTS组件-FoldSplitContainer - qidao123.com技术社区-IT企服评测·应用市场

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: Array<RadioOptions>;
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%")
}
}

复制代码