QML TreeView - Change position of expand icon

Question

I'm currently trying to change the layout of a QML TreeView so that the expand icon (the arrow or triangle you have to click in order to show or hide the children elements).

I tried anchoring the icon to the right of the TreeView, but for some reason it's not working, it remains on the left despite everything. Do you have any hint?

Thanks a lot!

TreeView {
    id: treeView
    anchors.fill: parent
    model: treeModResult

    style: TreeViewStyle {
        branchDelegate: Rectangle {
            width: 15; height: 15
            color: "#00000000"
            anchors.right: treeView.right

            Image {
                id: expandArrow
                source: styleData.isExpanded ? "qrc:/img/icn_arrow_top.svg" : "qrc:/img/icn_arrow_bottom.svg"
                sourceSize.width: parent.width
                sourceSize.height: parent.height
            }

            ColorOverlay {
                anchors.fill: expandArrow
                source: expandArrow
                color: "#293147"
            }
        }
    }
}

Update

This is what I currently have:

This is what I would like to have:

I think it will be nice if you can provide 2 images - what you have and what you want. — folibis
Thank you @folibis, I added the two images as you suggested! — Brutus

JServoz JServoz · Accepted Answer · 2021-03-19T06:50:00

I had the same issue, I came up with the following solution, as anchoring wasn't working for me neither..

style: TreeViewStyle {
        branchDelegate: Rectangle{
            id: expandIcon
            x: control.width - width

control.width represents the width of the treeview.

QML TreeView - Change position of expand icon

1 Answers