SplitView QML Type

Ordnet Elemente mit einem verschiebbaren Trennbalken zwischen den einzelnen Elementen an. Mehr...

• Liste aller Elemente, einschließlich vererbter Elemente

Eigenschaften

• handle : Component
• orientation : enumeration
• resizing : bool

Zugehörige Eigenschaften

• fillHeight : bool
• fillWidth : bool
• maximumHeight : real
• maximumWidth : real
• minimumHeight : real
• minimumWidth : real
• preferredHeight : real
• preferredWidth : real
• view : SplitView

Methoden

• bool restoreState(state)
• var saveState()

Ausführliche Beschreibung

SplitView ist ein Steuerelement, das Elemente horizontal oder vertikal anordnet und zwischen jedem Element eine verschiebbare Trennleiste enthält.

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

• SplitView.minimumWidth
• SplitView.minimumHeight
• SplitView.preferredWidth
• SplitView.preferredHeight
• SplitView.maximumWidth
• SplitView.maximumHeight
• SplitView.fillWidth (wahr, wenn nur ein untergeordnetes Element vorhanden ist)
• SplitView.fillHeight (wahr, wenn nur ein untergeordnetes Element vorhanden ist)

Darüber hinaus verfügt jeder Griff über die folgenden schreibgeschützten angehängten Eigenschaften:

• SplitHandle.hovered
• SplitHandle.pressed

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
    }

    // ...
}

Bei einer horizontalen SplitView ist es nicht erforderlich, die bevorzugte Höhe jedes Elements anzugeben, da diese an die Höhe der Ansicht angepasst werden. Bei vertikalen Ansichten gilt das Gegenteil.

Wenn ein Trennhebel gezogen wird, wird die Eigenschaft „ SplitView.preferredWidth “ oder „ SplitView.preferredHeight “ überschrieben, je nach der Eigenschaft „ 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 gibt immer ein Element (das Füllelement) in der „SplitView“, bei dem „ SplitView.fillWidth “ auf „ true “ gesetzt ist (oder „ SplitView.fillHeight “, wenn „ orientation “ auf „ Qt.Vertical “ gesetzt ist). Das bedeutet, dass dieses Element den gesamten verbleibenden Platz erhält, nachdem die anderen Elemente angeordnet wurden. Standardmäßig ist dies für das letzte sichtbare untergeordnete Element der „SplitView“ festgelegt, kann jedoch geändert werden, indem „ fillWidth “ für ein anderes Element explizit auf „ true “ gesetzt wird.

Ein Griff kann entweder zum Element auf der linken oder oberen Seite oder zum Element auf der rechten oder unteren Seite gehören:

• Befindet sich das Füllelement rechts: Der Griff gehört zum linken Element.
• Befindet sich das Füllelement auf der linken Seite: Der Griff gehört zum rechten Element.

Um eine SplitView mit drei Elementen zu erstellen und dem mittleren Element zusätzlichen Platz zuzuweisen, 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-Zustands

Der Hauptzweck von SplitView besteht darin, Benutzern die einfache Konfiguration der Größe verschiedener UI-Elemente zu ermöglichen. Darüber hinaus sollten die vom Benutzer bevorzugten Größen über mehrere Sitzungen hinweg gespeichert werden. Um dies zu erreichen, können die Werte der Eigenschaften „ SplitView.preferredWidth “ und „ SplitView.preferredHeight “ mithilfe der 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 können 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“ , „Anpassen von SplitView“ und „Container-Steuerelemente“.

Dokumentation zu den Eigenschaften

handle : Component

Diese Eigenschaft enthält die Handle-Komponente.

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

Die folgende Tabelle erläutert, wie die Größe der einzelnen Handles je nach Ausrichtung der geteilten Ansicht angepasst wird:

Um die Größe des Handles für Maus- und Touch-Ereignisse zu ändern, ohne dessen visuelle Größe zu verä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 von SplitView“.

orientation : enumeration

Diese Eigenschaft enthält die Ausrichtung des „ SplitView “.

Die Ausrichtung bestimmt, wie die geteilten Elemente angeordnet werden:

Mögliche Werte:

resizing : bool [read-only]

Diese Eigenschaft ist „ true “, wenn der Benutzer die Größe geteilter Elemente durch Ziehen an den Trennbalken-Griffen anpasst.

Dokumentation zur angehängten Eigenschaft

SplitView.fillHeight : bool [attached]

Diese angehängte Eigenschaft legt fest, ob das Element den verbleibenden Platz in der geteilten Ansicht einnimmt, nachdem alle anderen Elemente angeordnet wurden.

Standardmäßig füllt das letzte sichtbare untergeordnete Element der geteilten Ansicht die Ansicht aus, dies kann jedoch geändert werden, indem „ fillHeight “ für ein anderes Element explizit auf „ true “ gesetzt wird. Wenn bei mehreren Elementen „ fillHeight “ auf „ true “ gesetzt ist, füllt das oberste Element die Ansicht aus.

Die Höhe eines geteilten Elements, bei dem „ fillHeight “ auf „ true “ gesetzt ist, wird weiterhin durch die Werte von „ minimumHeight “ und „ maximumHeight “ begrenzt.

Siehe auch „ minimumHeight“ , „ preferredHeight “, „ maximumHeight “ und „ fillWidth “.

SplitView.fillWidth : bool [attached]

Diese angehängte Eigenschaft legt fest, ob das Element den verbleibenden Platz in der geteilten Ansicht einnimmt, nachdem alle anderen Elemente angeordnet wurden.

Standardmäßig füllt das letzte sichtbare untergeordnete Element der geteilten Ansicht die Ansicht aus, dies kann jedoch geändert werden, indem „ fillWidth “ für ein anderes Element explizit auf „ true “ gesetzt wird. Wenn bei mehreren Elementen „ fillWidth “ auf „ true “ gesetzt ist, füllt das Element ganz links die Ansicht aus.

Die Breite eines geteilten Elements, bei dem „ fillWidth “ auf „ true “ gesetzt ist, wird weiterhin durch „ minimumWidth “ und „ maximumWidth “ begrenzt.

Siehe auch „ minimumWidth“ , „ preferredWidth “, „ maximumWidth “ und „ fillHeight “.

SplitView.maximumHeight : real [attached]

Diese zugeordnete Eigenschaft steuert die maximale Höhe des geteilten Elements. Die Eigenschaft „ preferredHeight “ ist durch die Werte „ minimumHeight “ und „maximumHeight“ begrenzt. Ein geteiltes Element kann nicht so weit gezogen werden, dass es größer wird als seine „ maximumHeight “.

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 [attached]

Diese zugeordnete Eigenschaft steuert die maximale Breite des geteilten Elements. Die Eigenschaft „ preferredWidth “ wird durch die Werte „ minimumWidth “ und „maximumWidth“ begrenzt. Ein geteiltes Element kann nicht so weit gezogen werden, dass es größer als seine „ maximumWidth “ wird.

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 [attached]

Diese zugehörige Eigenschaft steuert die Mindesthöhe des geteilten Elements. Die „ preferredHeight “ ist durch die Werte „minimumHeight“ und „ maximumHeight “ begrenzt. Ein geteiltes Element kann nicht so weit verkleinert werden, dass es kleiner als seine „ minimumHeight “ wird.

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 [attached]

Diese zugeordnete Eigenschaft steuert die Mindestbreite des geteilten Elements. Die Eigenschaft „ preferredWidth “ ist durch die Werte „minimumWidth“ und „ maximumWidth “ begrenzt. Ein geteiltes Element kann nicht so weit verkleinert werden, dass es kleiner als seine „ minimumWidth “ wird.

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 [attached]

Diese zugeordnete Eigenschaft steuert die bevorzugte Höhe des geteilten Elements. Die bevorzugte Höhe wird als Größe des Elements verwendet und liegt im Bereich zwischen ` minimumHeight ` und ` maximumHeight`. Ist die bevorzugte Höhe nicht festgelegt, wird die ` implicitHeight ` des Elements verwendet.

Wenn die Größe eines geteilten Elements geändert wird, wird die Eigenschaft „preferredHeight“ angepasst, um die neue Größe zu berücksichtigen.

Standardmäßig ist diese Eigenschaft nicht festgelegt, sodass stattdessen „ implicitHeight “ verwendet wird. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf „ undefined “.

Siehe auch „ minimumHeight“ , „ maximumHeight “, „ fillHeight “ und „ preferredWidth “.

SplitView.preferredWidth : real [attached]

Diese zugeordnete Eigenschaft steuert die bevorzugte Breite des geteilten Elements. Die bevorzugte Breite wird als Größe des Elements verwendet und zwischen den Werten „ minimumWidth “ und „ maximumWidth “ festgelegt. Wenn die bevorzugte Breite nicht festgelegt ist, wird die „ implicitWidth “ des Elements verwendet.

Wenn die Größe eines geteilten Elements geändert wird, wird die „preferredWidth“ angepasst, um die neue Größe zu berücksichtigen.

Standardmäßig ist diese Eigenschaft nicht festgelegt, daher wird stattdessen „ implicitWidth “ verwendet. Um diese Eigenschaft auf ihren Standardwert zurückzusetzen, setzen Sie sie auf „ undefined “.

Siehe auch „ minimumWidth“ , „ maximumWidth “, „ fillWidth “ und „ preferredHeight “.

SplitView.view : SplitView [attached]

Diese angehängte Eigenschaft enthält die geteilte Ansicht des Elements, an das sie angehängt ist, oder den Wert „ null “, falls das Element nicht in einer geteilten Ansicht angezeigt wird.

Methodendokumentation

bool restoreState(state)

Liest die bevorzugten Größen aus „ state “ aus und wendet sie auf die aufgeteilten 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 dieses zurück.

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