QML TreeView - how to apply delegate to certain items in the tree?



  • Hello guys,

    I'm a newbie at QML and QT so please bear with me,
    I've created a model in C++ for a TreeView QML type through which I can view the model and apply a suitable delegate for my items.

    so what I need to do is to have 2 icons in front of each child item except for "Objects detected count" and "Objects in pallet count" and the parent items (i.e. communication status,...etc.) instead of having the icons in front of each item. The tree is shown below

    alt text

    Here is the delegate file

    MyTreeDelegate.qml

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    
    Component   //must wrap rectangle 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
                }
            }
        }
    }
    
    

    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
    {
        id:mainRec
        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: mainRec    //to fill rectangle
    
            model: theModel
    
            itemDelegate: theDelegate
    
            onItemDelegateChanged:
            {
    //        console.log("current index: ", index)
            }
    
            TableViewColumn
            {
                role: "name_role"
                title: "Status"
            }
        }
    }
    
    

    I've tried using styleData.row and styleData.index but I can't figure out how to use them to my advantage.

    Thanks for reading through all of this.



  • Make your delegate react to states. This might help get you moving again:
    https://qmlbook.github.io/en/ch05/index.html#states-and-transitions

    I also use ternary expressions (not states) to do things such as:

    Rectangle{
            color               : PathView.isCurrentItem ? color : currentColor; //"black" : "red"
    

    I don't see why you couldn't add a property:

    TreeView { 
    id: treeView;
    property bool activeComms: true;
    

    and in your delegate:

    source: parent.activeComms === false ? "images/GreenOff.png" : "images/RedOff.png";
    

    or

    source: parent.activeComms ? "images/GreenOn.png" : "images/RedOn.png";
    


  • @Haitham I haven't used Controls 1 but it looks like you can simply add the visible property value to Image elements:

    Image
    {
        visible: !(styleData.value === "Objects detected count" || styleData.value === "Palletizing Status" || [etc...])
    

    Or instead of text values try those styleData.row, styleData.index or something else which might work.