diff options
| author | Richard Moe Gustavsen <richard.gustavsen@qt.io> | 2023-11-09 11:02:04 +0100 |
|---|---|---|
| committer | Richard Moe Gustavsen <richard.gustavsen@qt.io> | 2023-11-27 20:18:42 +0100 |
| commit | 59daf95ac972cc93a48455835f98e79d9bff5810 (patch) | |
| tree | 90fb9368eab71391703235f5767866b45f91c4e3 /src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml | |
| parent | b6b2501e71bf0511ca7ad48a756aa45c46332022 (diff) | |
TreeView: document how to implement expanding indicators
Being able to rotate the expanded/collapsed indicator
in a TreeView is assumed to be a normal request. But
it's not very intuitive to implement, since TreeView will
do a relayout when you expand or collapse a node, which
will cause existing delegates to be reused. If a delegate
has an ongoing animations at this point, it will look weird.
In order to solve that, you need to use the
TableView.onPooled/onReused signals, which is not intuitive.
Until (and if) we have have a more explicit API to support
this, at least show in the documented example how it can be
done.
Pick-to: 6.6 6.5
Change-Id: Ibf08fd8518d74ba12a4a6f7db71f3f56a8970fac
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml')
| -rw-r--r-- | src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml | 69 |
1 files changed, 51 insertions, 18 deletions
diff --git a/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml index 97574487e9..68f757f314 100644 --- a/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml +++ b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml @@ -1,26 +1,31 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only //![0] import QtQuick +import QtQuick.Controls -Window { - width: 600 - height: 400 +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 { - id: treeDelegate - implicitWidth: padding + label.x + label.implicitWidth + padding implicitHeight: label.implicitHeight * 1.5 - readonly property real indent: 20 + readonly property real indentation: 20 readonly property real padding: 5 // Assigned to by TreeView: @@ -29,24 +34,52 @@ Window { required property bool expanded required property int hasChildren required property int depth + required property int row + required property int column + required property bool current - TapHandler { - onTapped: treeView.toggleExpanded(row) + // 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 - Text { + 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 - visible: treeDelegate.isTreeNode && treeDelegate.hasChildren - x: padding + (treeDelegate.depth * treeDelegate.indent) - anchors.verticalCenter: label.verticalCenter - text: "▸" - rotation: treeDelegate.expanded ? 90 : 0 + 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) + } + } } - Text { + Label { id: label - x: padding + (treeDelegate.isTreeNode ? (treeDelegate.depth + 1) * treeDelegate.indent : 0) - width: treeDelegate.width - treeDelegate.padding - x + x: padding + (isTreeNode ? (depth + 1) * indentation : 0) + anchors.verticalCenter: parent.verticalCenter + width: parent.width - padding - x clip: true text: model.display } |