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




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
}

}

}

[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


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


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

]
}
}
}


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


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