Using an If condition in a QML delegate?

[technoViking]

Hi,

I'm having an issue where I need to draw a different colored Rectangle based on a condition. OR better yet is it possible to use 2 different delegates?

So for instance
if for instance I get a value from the model such as "active" then the rectangle I should create should be green.

If I get "not active" the rectangle will look different.

THe problem is I don't know how I can use an if condition in the delegate. Currently I have:

ListView {
            id: calendarListView
            x: 7
            y: 96
            width: 587
            height: 418
 
            model: callsonholdModel
 
            delegate:
 
                Rectangle {
                id: calendarCellHolder
                height: 124
                border.width: 2
                border.color: "#CFCFCF"
                width: calendarHeader.width
 
             //HERE IS WHERE I NEED TO DECIDE WHAT RECTANGLE TO DRAW.  CURRENTLY ITS JUST DRAWING ALL THE SAME RECTANGLE.
 
                Rectangle {
                    id: activeMeetingRect
 
                    width: calendarHeader.width - 30
                    height: 84
                    radius: 9
 
                    anchors.top:calendarCellHolder.top
                    anchors.right: calendarCellHolder.right
                    anchors.left:  calendarCellHolder.left
 
                    anchors.topMargin: 20
                    anchors.bottomMargin: 20
                    anchors.leftMargin: 15
                    anchors.rightMargin: 15
 
                    gradient: Gradient {
                        GradientStop {
                            position: 0
                            color: "#5ffb26"
                        }
 
                        GradientStop {
                            position: 1
                            color: "#000000"
                        }
                    }

ListView {
            id: calendarListView
            x: 7
            y: 96
            width: 587
            height: 418

            model: callsonholdModel

            delegate:

                Rectangle {
                id: calendarCellHolder
                height: 124
                border.width: 2
                border.color: "#CFCFCF"
                width: calendarHeader.width

             //HERE IS WHERE I NEED TO DECIDE WHAT RECTANGLE TO DRAW.  CURRENTLY ITS JUST DRAWING ALL THE SAME RECTANGLE.

                Rectangle {
                    id: activeMeetingRect

                    width: calendarHeader.width - 30
                    height: 84
                    radius: 9

                    anchors.top:calendarCellHolder.top
                    anchors.right: calendarCellHolder.right
                    anchors.left:  calendarCellHolder.left

                    anchors.topMargin: 20
                    anchors.bottomMargin: 20
                    anchors.leftMargin: 15
                    anchors.rightMargin: 15

                    gradient: Gradient {
                        GradientStop {
                            position: 0
                            color: "#5ffb26"
                        }

                        GradientStop {
                            position: 1
                            color: "#000000"
                        }
                    }

To copy to clipboard, switch view to plain text mode 

EDIT: I actually just found out I could wrap the Rectangle's with a component { id: Delegate1 Rect{...} } component { id: Delegate2 Rect{...} }

so really I just need to see if I can use an if/else inside the delegate to switch between Delegate1 and Delgate2.


Thanks

[tbscope]

As far as I know, you can use javascript.

[kunal269]

Hi,

I am struggling with the same issue of delegating different elements by if. Please share some insight if you got anything on this.

Thanks in advance.
Kunal

[wladek]

Hi Guys,

Does anyone have an update on this one?
Any direction is highly appreciated.

Thanks and regards,
Wladek

[malcom2073]

Bump for an answer to this, I would really like this functionality

---

Added after 22 minutes:

hhurtta in #qt-qml on irc had the answer. Use a Loader in the component:

import Qt 4.7
 
Rectangle {
    width: 640
    height: 480
 
 
    ListView {
        id: view
        anchors.fill: parent
        model: model
        delegate:  delegate
 
    }
 
    ListModel {
        id: model
        ListElement {
            name: "text"
            value: "hello"
        }
        ListElement {
            name: "bool"
            value: true
        }
        ListElement {
            name: "bool"
            value: false
        }
        ListElement {
            name: "text"
            value: "world"
        }
    }
 
    Component {
        id: textComponent
        Text {
            text: value
        }
    }
 
 
    Component {
        id: boolComponent
        Text {
            text: value ? "[X]" : "[ ]"
        }
    }
 
    Component {
        id: delegate
 
        Loader {
            sourceComponent: name == "text" ? textComponent : boolComponent
        }
 
    }
 
}

import Qt 4.7

Rectangle {
    width: 640
    height: 480


    ListView {
        id: view
        anchors.fill: parent
        model: model
        delegate:  delegate

    }

    ListModel {
        id: model
        ListElement {
            name: "text"
            value: "hello"
        }
        ListElement {
            name: "bool"
            value: true
        }
        ListElement {
            name: "bool"
            value: false
        }
        ListElement {
            name: "text"
            value: "world"
        }
    }

    Component {
        id: textComponent
        Text {
            text: value
        }
    }


    Component {
        id: boolComponent
        Text {
            text: value ? "[X]" : "[ ]"
        }
    }

    Component {
        id: delegate

        Loader {
            sourceComponent: name == "text" ? textComponent : boolComponent
        }

    }

}

To copy to clipboard, switch view to plain text mode 

[isdes]

I have tried the malcom2073's if-example on Qt 4.7.0 and it works as expected. However on 4.7.2 the model variables are not visible to the textComponent and boolComponent delegates:

TestDelegates.qml:39: ReferenceError: Can't find variable: value
TestDelegates.qml:39: ReferenceError: Can't find variable: value

TestDelegates.qml:39: ReferenceError: Can't find variable: value
TestDelegates.qml:39: ReferenceError: Can't find variable: value

To copy to clipboard, switch view to plain text mode 

I have also tried to change the name of the variable in case it may be reserved keyword with the same result.

Does anyone have an idea what has changed from 4.7.0 to 4.7.2 in this topic and how to update this example to work?

Regards,
Darek

[fgungor]

You can use conditional expressions for the properties. That's how I achieve the desired behaviour.

e.g.

Rectangle {
radius: activeMeeting ? 4 : 0; // activeMeeting is a field in your particular model.
}

[isdes]

You can use conditional expressions for the properties. That's how I achieve the desired behaviour.

Yes, actually I end up with something similar. Instead of multiple conditional delegates I use one delegate with several states - each of them sets up the delegate to look in a different way. Based on some properties values I pick a state and assign it to the delegate.

[hooblei]

I have tried the malcom2073's if-example on Qt 4.7.0 and it works as expected. However on 4.7.2 the model variables are not visible to the textComponent and boolComponent delegates:

TestDelegates.qml:39: ReferenceError: Can't find variable: value
TestDelegates.qml:39: ReferenceError: Can't find variable: value

TestDelegates.qml:39: ReferenceError: Can't find variable: value
TestDelegates.qml:39: ReferenceError: Can't find variable: value

To copy to clipboard, switch view to plain text mode 

I have also tried to change the name of the variable in case it may be reserved keyword with the same result.

Does anyone have an idea what has changed from 4.7.0 to 4.7.2 in this topic and how to update this example to work?

Regards,
Darek

Same here with 4.7.2 - but found another solution - one Component with a conditional state switch:

import QtQuick 1.0
 
Rectangle {
	width: 640
	height: 480
 
 
	ListView {
        id: view
        anchors.fill: parent
        model: model
        delegate: delegate
	}
 
	ListModel {
        id: model
 
        ListElement {
            name: "text"
            value: "hello"
            asd: 't'
        }
 
        ListElement {
            name: "bool"
            value: true
            qwe: 'b'
        }
        ListElement {
            name: "bool"
            value: false
            qwe: 'b'
        }
        ListElement {
            name: "text"
            value: "world"
            asd: 't'
        }
	}
 
    Component {
        id: delegate
        Rectangle {
            id: wgt
 
            property alias r1_visible: r1.visible
            property alias r2_visible: r2.visible
 
            height: 20
            state: name == "text" ? "s1" : "s2"
 
            Rectangle {
                id: r1
                Text {
                    id: c1
                    text: asd + " " + value
                }
            }
 
            Rectangle {
                id: r2
                Text {
                    id: c2
                    text: qwe + " " + (value ? "[X]" : "[ ] ")
                }
            }
 
            states: [
                State {
                    name: "s1"
                    PropertyChanges {
                        target: wgt
                        r1_visible: true
                        r2_visible: false
                    }
                },
                State {
                    name: "s2"
                    PropertyChanges {
                        target: wgt
                        r1_visible: false
                        r2_visible: true
                    }
                }
 
            ]
        }
    }
}

import QtQuick 1.0

Rectangle {
	width: 640
	height: 480


	ListView {
        id: view
        anchors.fill: parent
        model: model
        delegate: delegate
	}
	
	ListModel {
        id: model

        ListElement {
            name: "text"
            value: "hello"
            asd: 't'
        }

        ListElement {
            name: "bool"
            value: true
            qwe: 'b'
        }
        ListElement {
            name: "bool"
            value: false
            qwe: 'b'
        }
        ListElement {
            name: "text"
            value: "world"
            asd: 't'
        }
	}

    Component {
        id: delegate
        Rectangle {
            id: wgt

            property alias r1_visible: r1.visible
            property alias r2_visible: r2.visible

            height: 20
            state: name == "text" ? "s1" : "s2"

            Rectangle {
                id: r1
                Text {
                    id: c1
                    text: asd + " " + value
                }
            }

            Rectangle {
                id: r2
                Text {
                    id: c2
                    text: qwe + " " + (value ? "[X]" : "[ ] ")
                }
            }

            states: [
                State {
                    name: "s1"
                    PropertyChanges {
                        target: wgt
                        r1_visible: true
                        r2_visible: false
                    }
                },
                State {
                    name: "s2"
                    PropertyChanges {
                        target: wgt
                        r1_visible: false
                        r2_visible: true
                    }
                }

            ]
        }
    }
}

To copy to clipboard, switch view to plain text mode 

It still feels a bit hacky and I think that this is a bug in 4.7.2 but everything looks as expected

t hello
b [X]
b [ ]
t world

t hello
b [X]
b [ ]
t world

To copy to clipboard, switch view to plain text mode 

and even no warning about missing properties (asd/qwe)