TreeView QML Type

Bietet eine Baumansicht zur Darstellung 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

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

Ausführliche Beschreibung

Eine TreeView verfügt über ein „ model “, das die anzuzeigenden Daten definiert, sowie über ein „ delegate “, das festlegt, wie die Daten dargestellt werden sollen.

TreeView erbt von „ TableView “. Das bedeutet, dass TreeView, obwohl das Modell eine Eltern-Kind-Baumstruktur aufweist, intern ein Proxy-Modell verwendet, das diese Struktur in ein flaches Tabellenmodell umwandelt, das von „ TableView “ gerendert werden kann. Jeder Knoten im Baum belegt letztendlich eine Zeile in der Tabelle, wobei die erste Spalte den Baum selbst darstellt. Indem jedes Delegat-Element in dieser Spalte entsprechend seiner Eltern-Kind-Tiefe im Modell eingerückt wird, sieht das Ergebnis wie ein Baum aus, auch wenn es technisch gesehen immer noch nur eine flache Liste von Elementen ist.

TreeView deklarieren

TreeView ist ein datengebundenes Steuerelement, daher kann es ohne Datenmodell nichts anzeigen. In QML können keine Baumknoten deklariert werden.

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

• Ein Datenmodell. TreeView kann mit Datenmodellen arbeiten, die von ` QAbstractItemModel` abgeleitet sind.
• Einen Delegaten. Ein Delegat ist eine Vorlage, die festlegt, 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 von ` QAbstractItemModel` erbt.

Informationen zum Erstellen und Verwenden eines benutzerdefinierten Baummodells finden Sie im Beispiel: „Qt Quick Controls – Inhaltsverzeichnis“.

Baumknoten anpassen

Um eine größere Flexibilität zu gewährleisten, ordnet das TreeView die Elemente des Delegaten nicht selbst in einer Baumstruktur an. Diese Aufgabe obliegt dem Delegaten. Qt Quick Controls bietet hierfür ein vorgefertigtes „ TreeViewDelegate “ an, das sofort einsatzbereit ist und einen Baum rendert, der dem Stil der Plattform entspricht, auf der die Anwendung läuft.

Auch wenn „ TreeViewDelegate “ anpassbar ist, kann es Situationen geben, in denen Sie den Baum auf andere Weise darstellen oder sicherstellen möchten, dass der Delegat möglichst minimalistisch ausfällt – etwa aus Leistungsgründen. Das Erstellen eines eigenen Delegats von Grund auf ist einfach, da TreeView eine Reihe von Eigenschaften bereitstellt, mit denen sich jeder Knoten im Baum korrekt positionieren und darstellen lässt.

Ein Beispiel für einen benutzerdefinierten Delegaten mit einer animierten Anzeige ist unten dargestellt:

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 als „ required “ gekennzeichneten Eigenschaften werden von TreeView ausgefüllt und ähneln den „attached properties“. Indem der Delegate sie als „required“ kennzeichnet, teilt er TreeView indirekt mit, dass TreeView die Verantwortung für die Zuweisung der Werte übernehmen soll. Die folgenden erforderlichen Eigenschaften können einem Delegate hinzugefügt werden:

• required property TreeView treeView - Verweist auf die TreeView, die das Delegat-Element enthält.
• required property bool isTreeNode - Ist „ true “, wenn das Delegat-Element einen Knoten im Baum darstellt. Zum Zeichnen des Baums wird nur eine Spalte in der Ansicht verwendet; daher wird diese Eigenschaft nur für Delegat-Elemente in dieser Spalte auf „ true “ gesetzt. Ein Knoten im Baum sollte in der Regel entsprechend seiner „ depth “ eingerückt sein und einen Indikator anzeigen, wenn „ hasChildren “ auf „ true “ gesetzt ist. Bei Delegat-Elementen in anderen Spalten ist diese Eigenschaft auf „ false “ gesetzt, und sie zeigen Daten aus den übrigen Spalten des Modells an (und sind in der Regel 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 Delegaten gezeichnete Modellelement Kinder im Modell hat.
• required property int depth - Enthält die Tiefe des vom Delegaten gezeichneten Modellelements. Die Tiefe eines Modellelements entspricht der Anzahl seiner Vorfahren im Modell.

Siehe auch „Erforderliche Eigenschaften“.

Interaktion mit dem Endbenutzer

Standardmäßig stellt „TreeView“ toggles den erweiterten Zustand einer Zeile ein, wenn Sie doppelt darauf tippen. Da dies im Widerspruch zum Doppeltippen zum Bearbeiten einer Zelle steht, setzt „TreeView“ standardmäßig „ editTriggers “ 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 erweiterten Zustands durch Doppeltippen deaktiviert.

Dokumentation zu den Eigenschaften

rootIndex : QModelIndex [since 6.6]

Diese Eigenschaft enthält den Modellindex des Stammelements im Baum. Standardmäßig entspricht dieser dem Stammindex im Modell, Sie können ihn jedoch auch auf einen Unterelementindex setzen, um nur einen Zweig des Baums anzuzeigen. Setzen Sie ihn auf „ undefined “, um das gesamte Modell anzuzeigen.

Diese Eigenschaft wurde in Qt 6.6 eingeführt.

Signal-Dokumentation

collapsed(row, recursively)

Dieses Signal wird ausgelöst, wenn eine „ row “ in der Ansicht ausgeblendet wird. „ row “ entspricht dem Argument, das dem Aufruf übergeben wurde, der das Ausblenden ausgelöst hat (collapse() oder collapseRecursively()). Wenn die Zeile rekursiv ausgeblendet wurde, lautet „ recursively “ true.

Siehe auch expanded(), expand(), collapse() und toggleExpanded().

expanded(row, depth)

Dieses Signal wird ausgelöst, wenn ein „ row “ in der Ansicht erweitert wird. „ row “ und „ depth “ entsprechen den Argumenten, die bei dem Aufruf übergeben wurden, der die Erweiterung ausgelöst hat (expand() oder expandRecursively()). Im Fall von expand() ist „ depth “ immer 1. Im Fall von expandToIndex() entspricht „ depth “ der Tiefe des Zielindex.

Siehe auch collapsed(), expand(), collapse() und toggleExpanded().

Methodendokumentation

void collapse(row)

Faltet den Baumknoten an der angegebenen Position „ row “ in der Ansicht zusammen.

row „xml-ph-0000@deepl.internal“ sollte sich auf die Zeile in der Ansicht (Tabellenzeile) beziehen und nicht auf eine Zeile im Modell.

Siehe auch ` expand()` und ` isExpanded()`.

[since 6.4] void collapseRecursively(row = -1)

Faltet den Baumknoten unter der angegebenen „ row “ in der Ansicht rekursiv bis hinunter zu allen Blättern zusammen.

Wenn ein Modell mehr als eine Wurzel hat, können Sie diese Funktion auch mit dem Parameter „ row “ gleich „ -1 “ aufrufen. Dadurch werden alle Wurzeln ausgeblendet. Der Aufruf von „collapseRecursively(-1)“ oder einfach „collapseRecursively()“ blendet somit alle Knoten im Modell aus.

row sollte sich auf die Zeile in der Ansicht (Tabellenzeile) beziehen und nicht auf eine Zeile im Modell.

Diese Methode wurde in Qt 6.4 eingeführt.

Siehe auch „ expandRecursively()“, „ expand()“, „ collapse()“, „ isExpanded()“ und „ depth()“.

int depth(row)

Gibt die Tiefe (die Anzahl der übergeordneten Elemente bis zur Wurzel) des angegebenen „ row “ zurück.

row „ row “ sollte die Zeile in der Ansicht (Tabellenzeile) sein und keine Zeile im Modell. Liegt „ “ nicht im Bereich zwischen „ 0 “ und „ rows “, ist der Rückgabewert „ -1 “.

Siehe auch modelIndex().

void expand(row)

Erweitert den Baumknoten an der angegebenen Adresse „ row “ in der Ansicht.

row „xml-ph-0000@deepl.internal“ sollte die Zeile in der Ansicht (Tabellenzeile) sein und keine Zeile im Modell.

Siehe auch „ collapse()“, „ isExpanded()“ und „ expandRecursively()“.

[since 6.4] void expandRecursively(row = -1, depth = -1)

Erweitert den Baumknoten an der angegebenen Position „ row “ in der Ansicht rekursiv bis hinunter zu „ depth “. „ depth “ sollte relativ zur Tiefe von „ row “ angegeben werden. Wenn „ depth “ auf „ -1 “ gesetzt ist, wird der Baum bis hinunter zu allen Blättern erweitert.

Bei einem Modell mit mehr als einer Wurzel können Sie diese Funktion auch mit dem row -Wert -1 aufrufen. Dadurch werden alle Wurzeln erweitert. Der Aufruf von `expandRecursively(-1, -1)` oder einfach `expandRecursively()` erweitert somit alle Knoten im Modell.

row sollte sich auf die Zeile in der Ansicht (Tabellenzeile) beziehen und nicht auf eine Zeile im Modell.

Diese Methode wurde in Qt 6.4 eingeführt.

Siehe auch „ collapseRecursively()“, „ expand()“, „ collapse()“, „ isExpanded()“ und „ depth()“.

[since 6.4] void expandToIndex(QModelIndex index)

Erweitert den Baum ausgehend vom angegebenen Modell index rekursiv bis zur Wurzel. Das Ergebnis ist, dass das Delegate-Element, das index darstellt, in der Ansicht sichtbar wird (sofern es nicht außerhalb des Ansichtsbereichs liegt). Um sicherzustellen, dass die Zeile im Ansichtsbereich sichtbar ist, können Sie Folgendes tun:

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

Diese Methode wurde in Qt 6.4 eingeführt.

Siehe auch expand() und expandRecursively().

bool isExpanded(row)

Gibt zurück, ob das angegebene „ row “ in der Ansicht als erweitert angezeigt wird.

row „ row “ sollte die Zeile in der Ansicht (Tabellenzeile) sein und keine Zeile im Modell. Wenn „ “ nicht zwischen „ 0 “ und „ rows “ liegt, lautet der Rückgabewert „ false “.

void toggleExpanded(row)

Schaltet ein, ob der Baumknoten unter der angegebenen row erweitert werden soll. Dies ist eine Erleichterung für folgende Vorgehensweise:

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

row sollte sich dabei um die Zeile in der Ansicht (Tabellenzeile) handeln und nicht um eine Zeile im Modell.