Unable to get selection in TreeView to work in QML/QT6.6.1

jarle

I'm trying to use QML TreeView in an application. The goal is to use the same code for desktop and mobile, so I'm basing it on QML. Currently I'm working with Linux desktop.

The model is written in C++ and seems to work (some test items appear in the TreeView). The delegate is TreeViewDelegate.

In the TreeView, I can expand and collapse items, but items are not selected. If I set the selected property in a OnClick handler, it is selected. But it's not visually changed from non-selected items. If I set a background in the delegate:

background: Rectangle {
    opacity: treeDelegate.selected ? 1 : 0
    color: "lightblue"
}

... the background is changed if I change the delegates selected property to "select" an item. If I try to use a selectionModel, the background may or may not be visually updated when an item is selected.

How is selection supposed to work? Selection is a tree-view is so basic for the functionality of most apps that I would expect it to work more or less out of the box without any customization - except for the selection-mode.

Is there a bug in this version of TreeView. or am I missing something?

My code:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Item {
    id: mainTree

    ColumnLayout {
        anchors.fill: parent

        TreeView {
            id: treeView

            Layout.fillHeight: true
            Layout.fillWidth: true
            model: treeModel
            selectionBehavior: TableView.SelectRows

            selectionModel: ItemSelectionModel {
                id: selectModel
                model: treeModel
            }

            delegate: TreeViewDelegate {
                id: treeDelegate


                background: Rectangle {
                    opacity: treeDelegate.selected ? 1 : 0
                    color: "lightblue"
                }

                onClicked: {
                    //selectModel.select(treeView.index(treeDelegate.row, 0),  ItemSelectionModel.ClearAndSelect | ItemSelectionModel.Rows)
                    //treeDelegate.selected = true
                    var mi = treeDelegate.treeView.index(row, column)
                    console.log("model.index =", mi)
                    console.log("selected =", treeDelegate.selected)
                }
            }
        }
    }
}

The code for the project on github:

Screenshot

jarle

I was unable to solve this in a simple way.

I ended up solving it in a similar way that the "filesystemexplorer" example does. That meant adding code to track the selected item in code, and rendering a rectangle in the background of each item manually - by checking if the rendered element is the selected element. Not very elegant.

I also found no way to get the QItemIndex for an element when it's rendered, so I have to call call into C++ to get a unique key (UUID) that then is compared with the key for the selected item - each time a item is rendered.

Anyway, it works now.

Bob64

@jarle said in Unable to get selection in TreeView to work in QML/QT6.6.1:

I also found no way to get the QItemIndex for an element when it's rendered

Did you try using the index property that is exposed to delegates or was that not suitable for what you needed?

BTW, I haven't tried the new Qt 6 TreeView yet (I'm still on Qt 5 and the old, deprecated TreeView) but I will have to migrate soon so questions like yours are interesting to me.