Back to Qt.io
Contact Us Blog Download Qt

SplitView QML Type

Legt Elemente mit einem verschiebbaren Splitter zwischen den einzelnen Elementen aus. Mehr...

Import Statement: import QtQuick.Controls
Inherits:

Container

Eigenschaften

Beigefügte Eigenschaften

Methoden

Detaillierte Beschreibung

SplitView ist ein Steuerelement, das Elemente horizontal oder vertikal mit einem verschiebbaren Splitter zwischen den einzelnen Elementen anordnet.

SplitView unterstützt die folgenden angehängten Eigenschaften für die von ihm verwalteten Elemente:

Darüber hinaus hat jeder Handle die folgenden schreibgeschützten angehängten Eigenschaften:

Hinweis: Handles sollten rein visuell sein und keine Ereignisse handhaben, da dies den Hovered- und Press-Status beeinträchtigen kann.

Die bevorzugte Größe der Elemente in einer SplitView kann über implicitWidth und implicitHeight oder SplitView.preferredWidth und SplitView.preferredHeight festgelegt werden:

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

Für eine horizontale SplitView ist es nicht notwendig, die bevorzugte Höhe der einzelnen Elemente anzugeben, da sie an die Höhe der Ansicht angepasst werden. Dies gilt in umgekehrter Weise für vertikale Ansichten.

Wenn ein geteilter Griff gezogen wird, wird die Eigenschaft SplitView.preferredWidth oder SplitView.preferredHeight überschrieben, je nach orientation der Ansicht.

Um die Größe von Elementen in einer horizontalen Ansicht zu begrenzen, verwenden Sie die folgenden Eigenschaften:

SplitView {
    anchors.fill: parent

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

    // ...
}

Um die Größe von Elementen in einer vertikalen Ansicht zu begrenzen, verwenden Sie die folgenden Eigenschaften:

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

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

    // ...
}

Es wird immer ein Element (das Füllelement) in der SplitView geben, bei dem SplitView.fillWidth auf true (oder SplitView.fillHeight, wenn orientation auf Qt.Vertical) eingestellt ist. Das bedeutet, dass dieses Element den gesamten verbleibenden Platz erhält, wenn die anderen Elemente angeordnet wurden. Standardmäßig hat das letzte sichtbare Kind der SplitView diese Einstellung, aber sie kann durch explizites Setzen von fillWidth auf true bei einem anderen Element geändert werden.

Ein Handle kann entweder links oder oben, oder rechts oder unten zum Element gehören:

  • Befindet sich das Füllelement auf der rechten Seite, gehört der Griff zum linken Element.
  • Befindet sich das Füllelement links, gehört das Handle zum rechten Element.

Um eine SplitView mit drei Elementen zu erstellen und dem mittleren Element überflüssigen Platz zu geben, könnte man folgendes tun:

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
        }
    }
}

Serialisierung des SplitView-Status

Der Hauptzweck von SplitView ist es, dem Benutzer die Möglichkeit zu geben, die Größe der verschiedenen UI-Elemente einfach zu konfigurieren. Darüber hinaus sollten die bevorzugten Größen des Benutzers über mehrere Sitzungen hinweg gespeichert werden. Um dies zu erreichen, können die Werte der Eigenschaften SplitView.preferredWidth und SplitView.preferredHeight mit den Funktionen saveState() und restoreState() serialisiert werden:

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
        // ...
    }
}

Alternativ dazu können auch die Funktionen value() und setValue() von Settings verwendet werden:

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
        // ...
    }
}

Siehe auch SplitHandle, Customizing SplitView, und Container Controls.

Eigenschaft Dokumentation

handle : Component

Diese Eigenschaft enthält die Handle-Komponente.

Eine Instanz dieser Komponente wird count - 1 mal instanziiert, solange count größer als 1 ist.

In der folgenden Tabelle wird erläutert, wie die Größe der einzelnen Handles in Abhängigkeit von der Ausrichtung der geteilten Ansicht geändert wird:

AusrichtungBreite des GriffsHandle Höhe
Qt.HorizontalimplicitWidthDie height der SplitView.
Qt.VerticalDie width der SplitView.implicitHeight

Um die Größe des Griffs für Maus- und Berührungsereignisse zu ändern, ohne seine visuelle Größe zu ändern, verwenden Sie ein 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"
    }
}

Siehe auch Anpassen der SplitView.


orientation : enumeration

Diese Eigenschaft enthält die Ausrichtung des SplitView.

Die Ausrichtung bestimmt, wie die geteilten Elemente angeordnet werden:

Mögliche Werte:

KonstantBeschreibung
Qt.HorizontalDie Elemente werden horizontal angeordnet (Standard).
Qt.VerticalDie Elemente werden vertikal angeordnet.

resizing : bool [read-only]

Diese Eigenschaft ist true, wenn der Benutzer die Größe der geteilten Elemente durch Ziehen an den Splittergriffen ändert.


Angehängte Eigenschaft Dokumentation

SplitView.fillHeight : bool

Diese angehängte Eigenschaft steuert, ob das Element den verbleibenden Platz in der geteilten Ansicht einnimmt, nachdem alle anderen Elemente angeordnet worden sind.

Standardmäßig füllt das letzte sichtbare untergeordnete Element der geteilten Ansicht die Ansicht aus. Dies kann jedoch geändert werden, indem fillHeight explizit auf true für ein anderes Element gesetzt wird. Wenn für mehrere Elemente fillHeight auf true gesetzt ist, wird das oberste Element die Ansicht ausfüllen.

Die Höhe eines geteilten Eintrags, bei dem fillHeight auf true gesetzt ist, ist immer noch innerhalb seiner minimumHeight und maximumHeight begrenzt.

Siehe auch minimumHeight, preferredHeight, maximumHeight, und fillWidth.


SplitView.fillWidth : bool

Diese angehängte Eigenschaft steuert, ob das Element den verbleibenden Platz in der geteilten Ansicht einnimmt, nachdem alle anderen Elemente angeordnet worden sind.

Standardmäßig füllt das letzte sichtbare untergeordnete Element der geteilten Ansicht die Ansicht aus, dies kann jedoch geändert werden, indem fillWidth explizit auf true für ein anderes Element gesetzt wird. Wenn für mehrere Elemente fillWidth auf true gesetzt ist, füllt das am weitesten links stehende Element die Ansicht aus.

Die Breite eines geteilten Eintrags, bei dem fillWidth auf true gesetzt ist, ist immer noch durch minimumWidth und maximumWidth begrenzt.

Siehe auch minimumWidth, preferredWidth, maximumWidth, und fillHeight.


SplitView.maximumHeight : real

Diese angehängte Eigenschaft steuert die maximale Höhe des geteilten Elements. Die preferredHeight ist innerhalb der minimumHeight und maximumHeight gebunden. Ein geteiltes Element kann nicht auf eine größere Höhe als maximumHeight gezogen werden.

Der Standardwert ist Infinity. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Siehe auch minimumHeight, preferredHeight, fillHeight, und maximumWidth.


SplitView.maximumWidth : real

Diese angehängte Eigenschaft steuert die maximale Breite des geteilten Elements. Die Eigenschaft preferredWidth ist an minimumWidth und maximumWidth gebunden. Ein geteiltes Element kann nicht auf eine größere Breite als maximumWidth gezogen werden.

Der Standardwert ist Infinity. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Siehe auch minimumWidth, preferredWidth, fillWidth, und maximumHeight.


SplitView.minimumHeight : real

Diese angehängte Eigenschaft steuert die Mindesthöhe des geteilten Elements. Die Eigenschaft preferredHeight ist an minimumHeight und maximumHeight gebunden. Ein geteiltes Element kann nicht kleiner als seine minimumHeight gezogen werden.

Der Standardwert ist 0. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Siehe auch maximumHeight, preferredHeight, fillHeight, und minimumWidth.


SplitView.minimumWidth : real

Diese angehängte Eigenschaft steuert die Mindestbreite des geteilten Elements. Die Eigenschaft preferredWidth ist an minimumWidth und maximumWidth gebunden. Ein geteiltes Element kann nicht auf eine kleinere Breite als minimumWidth gezogen werden.

Der Standardwert ist 0. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Siehe auch maximumWidth, preferredWidth, fillWidth, und minimumHeight.


SplitView.preferredHeight : real

Diese angehängte Eigenschaft steuert die bevorzugte Höhe des geteilten Elements. Die bevorzugte Höhe wird als Größe des Elements verwendet und ist an minimumHeight und maximumHeight gebunden. Wenn die bevorzugte Höhe nicht festgelegt ist, wird die implicitHeight des Elements verwendet.

Wenn ein geteiltes Element in der Größe verändert wird, wird die bevorzugte Höhe gesetzt, um die neue Größe zu berücksichtigen.

Standardmäßig ist diese Eigenschaft nicht gesetzt, so dass stattdessen implicitHeight verwendet wird. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Hinweis: Setzen Sie nicht die Eigenschaft height eines geteilten Elements, da sie bei jedem Layout von SplitView überschrieben wird.

Siehe auch minimumHeight, maximumHeight, fillHeight, und preferredWidth.


SplitView.preferredWidth : real

Diese angehängte Eigenschaft steuert die bevorzugte Breite des geteilten Elements. Die bevorzugte Breite wird als Größe des Elements verwendet und ist an minimumWidth und maximumWidth gebunden. Wenn die bevorzugte Breite nicht festgelegt ist, wird die implicitWidth des Elements verwendet.

Wenn ein geteiltes Element in der Größe verändert wird, wird die bevorzugte Breite festgelegt, um die neue Größe zu berücksichtigen.

Standardmäßig ist diese Eigenschaft nicht gesetzt, so dass stattdessen implicitWidth verwendet wird. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf undefined.

Hinweis: Setzen Sie nicht die Eigenschaft width eines geteilten Elements, da sie bei jedem Layout von SplitView überschrieben wird.

Siehe auch minimumWidth, maximumWidth, fillWidth, und preferredHeight.


SplitView.view : SplitView

Diese angehängte Eigenschaft enthält die geteilte Ansicht des Elements, an das sie angehängt ist, oder null, wenn sich das Element nicht in einer geteilten Ansicht befindet.


Methode Dokumentation

bool restoreState(state)

Liest die bevorzugten Größen aus state und wendet sie auf die geteilten Elemente an.

Gibt true zurück, wenn der Zustand erfolgreich wiederhergestellt wurde, andernfalls false.

Siehe auch Serializing SplitView's State und saveState().


var saveState()

Speichert die bevorzugten Größen der aufgeteilten Elemente in einem Byte-Array und gibt es zurück.

Siehe auch Serializing SplitView's State und restoreState().


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.