SplitView QML 类型

在每项之间有一个可拖动的拆分器来布局项。更多信息...

导入语句	import QtQuick.Controls
继承	Container

所有成员列表，包括继承成员

属性

handle : Component
orientation : 枚举
resizing : 布尔值

附加属性

fillHeight : 布尔值
fillWidth : 布尔值
maximumHeight : 实数
maximumWidth : 实数
minimumHeight : 实数
minimumWidth : 实数
preferredHeight : 实数
preferredWidth : 实数
view : SplitView

方法

bool restoreState(state)
var saveState()

详细描述

SplitView 是一个控件，它可以在每项之间带有可拖动的拆分器，以水平或垂直方式布局项。

SplitView 支持它管理的项的以下附加属性：

此外，每个处理程序都有以下只读附加属性：

注意：处理程序应仅用于视觉显示，不应处理事件，因为它可能会干扰其悬停和按下状态。

SplitView 中项的首选大小可以通过 implicitWidth 和 implicitHeight 或 SplitView.preferredWidth 和 SplitView.preferredHeight 来指定。

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

对于水平 SplitView，不需要指定每个项的首选高度，因为它们将调整为与视图相同的高度。反之亦然适用于垂直视图。

当拖动拆分处理程序时，将覆盖 SplitView.preferredWidth 或 SplitView.preferredHeight 属性，具体取决于视图的 orientation。

为了限制水平视图中的项目大小，请使用以下属性

SplitView {
    anchors.fill: parent

    Item {
        SplitView.minimumWidth: 25
        SplitView.preferredWidth: 50
        SplitView.maximumWidth: 100
    }

    // ...
}

为了限制垂直视图中的项目大小，请使用以下属性

SplitView {
    anchors.fill: parent
    orientation: Qt.Vertical

    Item {
        SplitView.minimumHeight: 25
        SplitView.preferredHeight: 50
        SplitView.maximumHeight: 100
    }

    // ...
}

SplitView 中总会有一个项目（填充项目），其 SplitView.fillWidth 设置为 true（或当方向为 Qt.Vertical 时，SplitView.fillHeight）。这意味着当其他项目布局完成后，该项目将获得所有剩余空间。默认情况下，SplitView 的最后一个可见子项将具有此设置，但可以通过在另一个项目上显式设置 fillWidth 为 true 来更改它。

手柄可以位于项目左侧或顶部，也可以位于右侧或底部

如果填充项目在右侧：手柄属于左侧项。
如果填充项目在左侧：手柄属于右侧项。

要创建一个包含三个项目的 SplitView，并让中间项目获取额外空间，可以执行以下操作

SplitView {
    anchors.fill: parent
    orientation: Qt.Horizontal

    Rectangle {
        implicitWidth: 200
        SplitView.maximumWidth: 400
        color: "lightblue"
        Label {
            text: "View 1"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        id: centerItem
        SplitView.minimumWidth: 50
        SplitView.fillWidth: true
        color: "lightgray"
        Label {
            text: "View 2"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        implicitWidth: 200
        color: "lightgreen"
        Label {
            text: "View 3"
            anchors.centerIn: parent
        }
    }
}

序列化 SplitView 的状态

SplitView 的主要目的是允许用户轻松配置各种 UI 元素的大小。此外，用户的偏好大小应该在会话之间记住。为了实现这一点，可以通过 saveState() 和 restoreState() 函数来序列化 SplitView.preferredWidth 和 SplitView.preferredHeight 属性的值

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.splitView)
    Component.onDestruction: settings.splitView = splitView.saveState()

    Settings {
        id: settings
        property var splitView
    }

    SplitView {
        id: splitView
        // ...
    }
}

或者，可以使用 value() 和 setValue() 函数设置

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.value("ui/splitview"))
    Component.onDestruction: settings.setValue("ui/splitview", splitView.saveState())

    Settings {
        id: settings
    }

    SplitView {
        id: splitView
        // ...
    }
}

另请参阅 SplitHandle、自定义 SplitView 和容器控件。

属性文档

handle : 组件

这个属性包含手柄组件。

该组件的实例将被实例化 count - 1 次，前提是 count 大于 1。

以下表格说明了根据 SplitView 的方向如何调整每个手柄的大小

方向	手柄宽度	手柄高度
`Qt.Horizontal`	`隐含宽度`	SplitView 的 `高度`。
`Qt.Vertical`	SplitView 的 `宽度`。	`隐含高度`

要更改手柄的鼠标和触摸事件的大小，而不更改其视觉大小，请使用 containmentMask

SplitView {
    id: splitView
    anchors.fill: parent

    handle: Rectangle {
        id: handleDelegate
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")

        containmentMask: Item {
            x: (handleDelegate.width - width) / 2
            width: 64
            height: splitView.height
        }
    }

    Rectangle {
        implicitWidth: 150
        color: "#444"
    }
    Rectangle {
        implicitWidth: 50
        color: "#666"
    }
}