组件/基础组件

ESplitter 分隔面板

import EUI 1.0

示例与代码

拖动尺寸、折叠与延迟调整

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width ESwitch { text: qsTr("释放后调整") onToggled: webBasicSplitter.lazy = checked } ESplitter { id: webBasicSplitter height: 180 width: parent.width ESplitterPanel { min: 100 size: "35%" collapsible: true ECard { anchors.fill: parent header: qsTr("资源") } } ESplitterPanel { min: 120 ECard { anchors.fill: parent header: qsTr("工作区") } } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

分隔面板

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESplitter { width: 600 height: 160 ERectangle { border.width: 1 SplitView.minimumWidth: 100 SplitView.preferredWidth: 200 color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } ERectangle { border.width: 1 SplitView.fillWidth: true color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

activeHandleint

当前正在拖动的分隔条对象。

默认值-1

collapseEventsvar

等待派发的面板折叠状态事件。

默认值[]

enabledbool

是否允许交互；false 时控件禁用。

默认值true

finishedIndexint

正在调整尺寸或等待结束通知的分隔条索引。

默认值-1

handleSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值6

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

initialSizesvar

拖动分隔条开始时保存的面板尺寸数组。

默认值[]

layoutstring

分割面板的排列方向。

"horizontal" / "vertical"

默认值"horizontal"

lazybool

按需创建内容或加载数据；数据控件使用 load / lazyLoad。

默认值false

orientationenum

组件的排列方向。

Qt.Horizontal
Qt.Vertical

默认值layout === "vertical" ? Qt.Vertical : Qt.Horizontal

pendingDeltareal

延迟调整模式中等待应用的拖动位移，单位为像素。

默认值0

resizeIndexint

正在调整尺寸或等待结束通知的分隔条索引。

默认值-1

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

sizesvar只读

分隔容器内各面板当前尺寸数组。

默认值由运行时计算

信号

签名作用

resize(int index, var sizes)

拖动分隔条时触发，index 为分隔条索引，sizes 为各面板的当前尺寸。

resizeEnd(int index, var sizes)

结束拖动分隔条时触发，index 为索引，sizes 为最终面板尺寸。

resizeStart(int index, var sizes)

开始拖动分隔条时触发，index 为索引，sizes 为起始面板尺寸。

collapsed(int index, string side, var sizes)

折叠或恢复面板时触发，index 为面板索引，side 为折叠方向，sizes 为更新后的尺寸。

方法

签名作用

panelSizes()

返回各分隔面板的当前尺寸。

collapsePanel(index, collapsed, side)

折叠或恢复 index 指定的面板，side 指定折叠方向。

resizePanels(index, delta)

调整 index 对应分隔条两侧的尺寸，delta 为移动距离。