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

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