aboutsummaryrefslogtreecommitdiffstats
path: root/src/quick/doc/snippets/qml
diff options
context:
space:
mode:
authorRichard Moe Gustavsen <richard.gustavsen@qt.io>2022-12-01 14:22:34 +0100
committerRichard Moe Gustavsen <richard.gustavsen@qt.io>2022-12-07 01:17:19 +0100
commit84d3c382f808d70c418a9c220cff6fee06f5639a (patch)
treeb44f7486eaad033f78bb515176d7755508a86a70 /src/quick/doc/snippets/qml
parentafc2abdebf6efa50eaaed0b1e33bc39bde60352e (diff)
QQuickTableView: let the edit delegate be a child of the cell delegate
The first version parented the edit delegate to the content item of QQuickTableView. This approach, however, turned out make it really difficult to implement an edit delegate that relied on the geometry of items inside the tableview delegate. E.g for a TreeViewDelegate, we would like to show an editable TextField on top of the label while editing. But only on top of the label, not the whole delegate (including e.g the expanded/collapsed indicator). Moreover, we don't want to hide the whole delegate while editing, only the label that is underneatch (a possible semi-transparent) edit delegate. For this to be possible, we therefore need to parent the edit delegate to the TableView delegate instead, so that the edit delegate can e.g more easily query the geometry of the items inside the delegate (like the label) to position its own items (like a TextField). Since we also want the developer to then have more control over which items get hidden, we offer a property: "required property bool editing" to the tableview delegate. This can be used to e.g hide items inside the delegate while its being edited (or to implement other kinds of transitions). This new solution should also be easier to work with, and understand, for application developers, since the parent-child structure now mirrors the location where the edit delegate is written in QML. Change-Id: Ieeae28c8297f8bb1fb2d90d152fd575b4f41f36f Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qml')
-rw-r--r--src/quick/doc/snippets/qml/tableview/editdelegate.qml47
1 files changed, 45 insertions, 2 deletions
diff --git a/src/quick/doc/snippets/qml/tableview/editdelegate.qml b/src/quick/doc/snippets/qml/tableview/editdelegate.qml
index 1fdf9e7b3a..b320969347 100644
--- a/src/quick/doc/snippets/qml/tableview/editdelegate.qml
+++ b/src/quick/doc/snippets/qml/tableview/editdelegate.qml
@@ -36,17 +36,60 @@ Window {
}
TableView.editDelegate: TextField {
+ anchors.fill: parent
text: display
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
Component.onCompleted: selectAll()
TableView.onCommit: {
- let index = TableView.view.modelIndex(column, row)
- TableView.view.model.setData(index, text, Qt.DisplayRole)
+ display = text
+ // display = text is short-hand for:
+ // let index = TableView.view.modelIndex(column, row)
+ // TableView.view.model.setData(index, text, Qt.DisplayRole)
}
}
}
}
//![0]
+
+ TableView {
+ id: tableView1
+ anchors.fill: parent
+ clip: true
+
+ model: TableModel {
+ TableModelColumn { display: "name" }
+ rows: [ { "name": "Harry" }, { "name": "Hedwig" } ]
+ }
+
+ selectionModel: ItemSelectionModel {}
+
+//![1]
+ delegate: Rectangle {
+ implicitWidth: 100
+ implicitHeight: 50
+
+ required property bool editing
+
+ Text {
+ id: textField
+ anchors.fill: parent
+ anchors.margins: 5
+ text: display
+ visible: !editing
+ }
+
+ TableView.editDelegate: TextField {
+ x: textField.x
+ y: textField.y
+ width: textField.width
+ height: textField.height
+ text: display
+ TableView.onCommit: display = text
+ }
+ }
+//![1]
+ }
+
}