Horizontal scrollbar doesn't stretch according to the Treeview content.

[kkDenis]

Dear friends,

I'm drawing a QML tree based on the TreeView control these days. It's nearly done, until I found there is some problems with the horizontal scroll bar.

It seems the horizontal scrollbar doesn't stretch according to the tree content.

Really appreciate let me know what I missed out.

Code attached:

import QtQuick 2.12
import QtQuick.Controls 1.5
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.12
import QtQuick.Controls.Styles 1.4

import com.company.TreeModel 1.0

// todo:
//   1. drag and drop
//   2. context menu
//   3. fix horizontal scroll bar


ApplicationWindow {
    id: applicationWindow

    visible: true
    width: 640
    height: 480
    title: qsTr("Tree View")

    ColumnLayout{
        width: 500
        height: 400
        anchors.horizontalCenter: parent.horizontalCenter

        TreeModel {
            id: myModel
        }

        TreeView {
            id: tree

            Layout.fillHeight: true
            Layout.fillWidth: true

            Layout.leftMargin: 10
            Layout.topMargin: 10
            headerVisible: false

            model: myModel

            TableViewColumn {
                role: "value"
                title: "Default"
            }

            clip: true

            rowDelegate: Rectangle {
                color: styleData.selected ? "lightblue" : "transparent"
                height: 22
            }

            itemDelegate: Rectangle {
                id: item
                function loadImage(index) {
                    return "images/file.png"
                }

                color: styleData.selected ? "lightblue" : "transparent"

                Image {
                    id: icon
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    source: loadImage(styleData.index)
                }

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: icon.right
                    anchors.leftMargin: 6
                    text: styleData.value
                }
            }

            style: TreeViewStyle {
                branchDelegate: Rectangle {
                    width: 16
                    height: 16
                    color: "transparent"
                    transform: Rotation { origin.x: 8; origin.y: 8; angle: styleData.isExpanded ? 90:0}

                    Canvas{
                        anchors.fill:parent

                        onPaint:{
                            var context = getContext("2d");

                            context.beginPath()
                            context.moveTo(5, 13)
                            context.lineTo(5, 3)
                            context.lineTo(12, 8)
                            context.closePath()

                            context.fillStyle = "dimgray"
                            context.fill();
                        }
                    }
                }

                // TreeViewStyle is Inherited By ScrollViewStyle,so we can decorate scrollviw style directly
                handle: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    color: "red"
                }
                scrollBarBackground: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    color: "transparent"
                }
                decrementControl: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    color: "green"
                }
                incrementControl: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    color: "blue"
                }

            }

            onDoubleClicked : function(index){
                // console.log("double clicked ", index.row, index.column)
                console.log("col count ", columnCount, tree.width)
                if (isExpanded(index)) {
                    collapse(index)
                } else {
                    expand(index)
                }
            }
        }
    }
}