TreeView QML Type

Bietet eine Baumansicht zur Anzeige von Daten aus einem QAbstractItemModel. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• rootIndex : QModelIndex (since 6.6)

Signale

• collapsed(row, recursively)
• expanded(row, depth)

Methoden

• collapse(row)
• collapseRecursively(row) (since 6.4)
• int depth(row)
• expand(row)
• expandRecursively(row, depth) (since 6.4)
• expandToIndex(QModelIndex index) (since 6.4)
• bool isExpanded(row)
• toggleExpanded(row)

Detaillierte Beschreibung

Eine TreeView hat ein Modell, das die anzuzeigenden Daten definiert, und einen Delegaten, der definiert, wie die Daten angezeigt werden sollen.

TreeView erbt TableView. Das bedeutet, dass selbst wenn das Modell eine Eltern-Kind-Baumstruktur hat, TreeView intern ein Proxy-Modell verwendet, das diese Struktur in ein flaches Tabellenmodell umwandelt, das von TableView gerendert werden kann. Jeder Knoten im Baum belegt eine Zeile in der Tabelle, wobei die erste Spalte den Baum selbst wiedergibt. Durch die Einrückung jedes Delegatenelements in dieser Spalte entsprechend seiner Eltern-Kind-Tiefe im Modell, sieht es am Ende wie ein Baum aus, auch wenn es technisch gesehen nur eine flache Liste von Elementen ist.

Einen TreeView deklarieren

TreeView ist ein datengebundenes Steuerelement, daher kann es ohne ein Datenmodell nichts anzeigen. Sie können keine Baumknoten in QML deklarieren.

Wenn Sie ein TreeView deklarieren, müssen Sie folgendes angeben:

• Ein Datenmodell. TreeView kann mit Datenmodellen arbeiten, die von QAbstractItemModel abgeleitet sind.
• Ein Delegat. Ein Delegat ist eine Vorlage, die angibt, wie die Baumknoten in der Benutzeroberfläche angezeigt werden.

TreeView {
    // The model needs to be a QAbstractItemModel
    model: myTreeModel
    // You can set a custom delegate or use a built-in TreeViewDelegate
    delegate: TreeViewDelegate {}
}

Erstellen eines Datenmodells

Ein TreeView akzeptiert nur ein Modell, das QAbstractItemModel erbt.

Informationen zum Erstellen und Verwenden eines benutzerdefinierten Baummodells finden Sie im Beispiel: Qt Quick Controls - Table of Contents.

Anpassen von Baumknoten

Um die Flexibilität zu erhöhen, positioniert TreeView selbst die Delegatenelemente nicht in einer Baumstruktur. Diese Aufgabe wird auf den Delegaten übertragen. Qt Quick Controls bietet ein fertiges TreeViewDelegate an, das dafür verwendet werden kann, was den Vorteil hat, dass es out-of-the-box funktioniert und einen Baum darstellt, der dem Stil der Plattform folgt, auf der die Anwendung läuft.

Auch wenn TreeViewDelegate anpassbar ist, kann es Situationen geben, in denen Sie den Baum auf eine andere Art und Weise rendern wollen oder sicherstellen wollen, dass der Delegat so minimal wie möglich ausfällt, vielleicht aus Leistungsgründen. Die Erstellung eines eigenen Delegaten von Grund auf ist einfach, da TreeView eine Reihe von Eigenschaften bietet, die verwendet werden können, um jeden Knoten im Baum korrekt zu positionieren und darzustellen.

Ein Beispiel für einen benutzerdefinierten Delegaten mit einem animierten Indikator wird unten gezeigt:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 800
    height: 600
    visible: true

    TreeView {
        id: treeView
        anchors.fill: parent
        anchors.margins: 10
        clip: true

        selectionModel: ItemSelectionModel {}

        // The model needs to be a QAbstractItemModel
        // model: yourTreeModel

        delegate: Item {
            implicitWidth: padding + label.x + label.implicitWidth + padding
            implicitHeight: label.implicitHeight * 1.5

            readonly property real indentation: 20
            readonly property real padding: 5

            // Assigned to by TreeView:
            required property TreeView treeView
            required property bool isTreeNode
            required property bool expanded
            required property bool hasChildren
            required property int depth
            required property int row
            required property int column
            required property bool current

            // Rotate indicator when expanded by the user
            // (requires TreeView to have a selectionModel)
            property Animation indicatorAnimation: NumberAnimation {
                target: indicator
                property: "rotation"
                from: expanded ? 0 : 90
                to: expanded ? 90 : 0
                duration: 100
                easing.type: Easing.OutQuart
            }
            TableView.onPooled: indicatorAnimation.complete()
            TableView.onReused: if (current) indicatorAnimation.start()
            onExpandedChanged: indicator.rotation = expanded ? 90 : 0

            Rectangle {
                id: background
                anchors.fill: parent
                color: row === treeView.currentRow ? palette.highlight : "black"
                opacity: (treeView.alternatingRows && row % 2 !== 0) ? 0.3 : 0.1
            }

            Label {
                id: indicator
                x: padding + (depth * indentation)
                anchors.verticalCenter: parent.verticalCenter
                visible: isTreeNode && hasChildren
                text: "▶"

                TapHandler {
                    onSingleTapped: {
                        let index = treeView.index(row, column)
                        treeView.selectionModel.setCurrentIndex(index, ItemSelectionModel.NoUpdate)
                        treeView.toggleExpanded(row)
                    }
                }
            }

            Label {
                id: label
                x: padding + (isTreeNode ? (depth + 1) * indentation : 0)
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width - padding - x
                clip: true
                text: model.display
            }
        }
    }
}

Die Eigenschaften, die als required markiert sind, werden von TreeView ausgefüllt und sind ähnlich wie angehängte Eigenschaften. Indem der Delegat sie als erforderlich markiert, teilt er TreeView indirekt mit, dass er die Verantwortung für die Zuweisung dieser Werte übernehmen soll. Die folgenden erforderlichen Eigenschaften können zu einem Delegaten hinzugefügt werden:

• required property TreeView treeView - Zeigt auf den TreeView, der das Delegate-Element enthält.
• required property bool isTreeNode - Ist true, wenn das delegierte Element einen Knoten im Baum darstellt. Es wird nur eine Spalte in der Ansicht verwendet, um den Baum zu zeichnen, und daher haben nur Delegatenelemente in dieser Spalte diese Eigenschaft auf true gesetzt. Ein Knoten in der Struktur sollte in der Regel entsprechend seiner depth eingerückt werden und einen Indikator anzeigen, wenn hasChildren true ist. Delegierte Elemente in anderen Spalten haben diese Eigenschaft auf false gesetzt und zeigen Daten aus den verbleibenden Spalten im Modell (und sind normalerweise nicht eingerückt).
• required property bool expanded - Ist true, wenn das vom Delegaten gezeichnete Modellelement in der Ansicht erweitert ist.
• required property bool hasChildren - Ist true, wenn das vom Delegierten gezeichnete Modellelement Kinder im Modell hat.
• required property int depth - Enthält die Tiefe des Modellelements, das vom Delegierten gezeichnet wurde. Die Tiefe eines Modellelements ist gleich der Anzahl der Vorfahren, die es im Modell hat.

Siehe auch Erforderliche Eigenschaften.

Interaktion mit dem Endbenutzer

Standardmäßig zeigt TreeView toggles den aufgeklappten Zustand einer Zeile an, wenn man doppelt auf sie tippt. Da dies im Konflikt mit dem Doppeltippen zum Bearbeiten einer Zelle steht, setzt TreeView editTriggers standardmäßig auf TableView.EditKeyPressed (was sich von TableView unterscheidet, das TableView.EditKeyPressed | TableView.DoubleTapped verwendet). Wenn Sie editTriggers so ändern, dass es auch TableView.DoubleTapped enthält, wird das Umschalten des aufgeklappten Zustands mit einem Doppeltipp deaktiviert.

Eigenschaft Dokumentation

Signal Dokumentation

Dokumentation der Methode

expandToIndex(index)
forceLayout()
positionViewAtRow(rowAtIndex(index), Qt.AlignVCenter)

if (isExpanded(row))
    collapse(row)
else
    expand(row)