Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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.

    pic.png

    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)
                    }
                }
            }
        }
    }
    
    
    

Log in to reply