QML itemdelegate file doesn't auto update in a TreeView



  • Hello everybody
    I'm a newbie at both Qt and QML so bear with me.

    I'm having 2 separate QML files (main file and a tree delegate file), both in the resources file in my Qt application.
    The model for the tree view is written in C++ and no problem with that.

    So my problem is as follows,

    whenever I edit the delegate file, I've to rewrite the part where I call the delegate in the main file in order for the changes to take effect (i.e itemDelegate: MyTreeDelegate{}).

    here are the two qml files

    //main.qml
    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Window 2.2
    import MyTreeModel 1.0  //from qmlRegister in C++ code
    
    Rectangle{
        MyTreeModel
        {
            id: theModel
        }
    
        TreeView
        {
            style: TreeViewStyle    //for styling the tree
            {
                backgroundColor: "white"
                alternateBackgroundColor:"white"
            }
    
    
            headerVisible: false    //to hide the header
            anchors.fill: parent    //to fill rectangle
            
            model: theModel
    
            //this is the line I've to rewrite everytime I change the delegate file
            itemDelegate:  MyTreeDelegate{}
    
    
            TableViewColumn
            {
                role: "name_role"
                title: "Status"
            }
        }
    }
    
    import QtQuick 2.0
    import QtQuick.Controls 1.4
    
    Rectangle {
        id:baseRec
        color: "transparent"
        height: 5
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log("row: ",styleData.row)
                console.log("column: ",styleData.column)
                console.log("index: ",styleData.index)
            }
        }
    
        Text
        {
            anchors.verticalCenter: parent.verticalCenter
            text: styleData.value === undefined ? "" : styleData.value
        }
    
        Image
        {
            height: baseRec.height
            width: height
            id:rightImage
            source: "images/RedOff.png"
            anchors
            {
                verticalCenter:baseRec.verticalCenter
                right:baseRec.right
            }
        }
    
        Image
        {
            id:leftImage
            height: baseRec.height
            width: height
            source: "images/GreenOff.png"
            anchors
            {
                verticalCenter:baseRec.verticalCenter
                right:rightImage.left
            }
        }
    }
    
    

    is this a bug? I'm using Qt 5.8.0 FYI.

    Thanks in advance.



  • Ok
    I've found out the solution.

    I've to capsulate my delegate in a Component QML Type as shown below

    MyTreeDelegate.qml

    Component   //must wrap rectange inside a component QML type to be called from a different file
    {
        Rectangle
        {
            id:baseRec
            color: "transparent"
            //    color: ( styleData.row % 2 == 1 ) ? "white" : "#60e6dd"
            height: 5
            //    border.color: "black"
            //    border.width: 1
            MouseArea
            {
                anchors.fill: parent
    
                onClicked:
                {
                    console.log("row: ",styleData.row)
                    console.log("column: ",styleData.column)
                    console.log("index: ",styleData.index)
                }
    
            }
    
            Text
            {
                anchors.verticalCenter: parent.verticalCenter
                text: styleData.value === undefined ? "" : styleData.value
                // The branches don't have a description_role so styleData.value will be undefined
            }
    
            Image
            {
                height: baseRec.height
                width: height
                id:rightImage
                source: "images/RedOff.png"
                anchors
                {
                    verticalCenter:baseRec.verticalCenter
                    right:baseRec.right
                }
            }
    
            Image
            {
                id:leftImage
                height: baseRec.height
                width: height
                source: "images/GreenOff.png"
                anchors
                {
                    verticalCenter:baseRec.verticalCenter
                    right:rightImage.left
                }
            }
        }
    }
    

    and then I can call it in main.qml as shown below

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Window 2.2
    import MyTreeModel 1.0  //from qmlRegister in C++ code
    
    Rectangle{
        MyTreeModel
        {
            id: theModel
        }
    
        MyTreeDelegate
        {
            id: theDelegate
        }
    
        TreeView
        {
            id: treeView
            style: TreeViewStyle    //for styling the tree
            {
                backgroundColor: "white"
                alternateBackgroundColor:"white"
                //branch delegates are used for delegating the arrow on the left
            }
            //think of what to do on a double click or single click
            //think of how to delegate only specific children
    
            headerVisible: false    //to hide the header
            anchors.fill: parent    //to fill rectangle
    
            model: theModel
            onItemDelegateChanged:
            {
    //        console.log("current index: ", index)
            }
    
            itemDelegate: theDelegate
    
            TableViewColumn
            {
                role: "name_role"
                title: "Status"
            }
            //        TableViewColumn {
            //            role: "description_role"
            //            title: "Description"
            //        }
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.