How to add color to the List View Element in QML?

[harish]

Hi all,
I am new to QML and i am trying an application in which there is a list view containing number of elements.

I need to differentiate each item in the list using different colors.How to add color to the element in the list?


Anyone help me with this?

Here is my code:

ListView {
id: listview1
x: 0
y: 101
width: 360
height: 320
anchors.verticalCenterOffset: 101
anchors.horizontalCenterOffset: 0
anchors.topMargin: 101
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top
spacing: 12
flickDeceleration: 1748
clip: true
 
header: ListHeading {
ListItemText {
text: "Fruits"
id: text_edit2
x: 100
y: 303
width: 182
height: 34
color: "blue"
 
font.family: "Times New Roman"
font.pixelSize: 30
 
 
anchors.fill: parent.paddingItem
role: "Heading"
 
 
 
}
}
delegate: ListItem {
id: listItem
Column {
anchors.fill: parent.paddingItem
ListItemText {
width: parent.width
text: titleText
color: "yellow"
role: "Title"
mode: listItem.mode
}
 
}
}
 
model: ListModel {
ListElement {
 
titleText: "Apple"
 
 
 
}
 
ListElement {
titleText: "Mango"
 
 
 
 
 
}
 
ListElement {
titleText: "Orange"
 
 
}
 
ListElement {
titleText: "Grapes"
 
 
}
}
 
}

ListView {
id: listview1
x: 0
y: 101
width: 360
height: 320
anchors.verticalCenterOffset: 101
anchors.horizontalCenterOffset: 0
anchors.topMargin: 101
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top
spacing: 12
flickDeceleration: 1748
clip: true

header: ListHeading {
ListItemText {
text: "Fruits"
id: text_edit2
x: 100
y: 303
width: 182
height: 34
color: "blue"

font.family: "Times New Roman"
font.pixelSize: 30


anchors.fill: parent.paddingItem
role: "Heading"



}
}
delegate: ListItem {
id: listItem
Column {
anchors.fill: parent.paddingItem
ListItemText {
width: parent.width
text: titleText
color: "yellow"
role: "Title"
mode: listItem.mode
}

}
}

model: ListModel {
ListElement {

titleText: "Apple"



}

ListElement {
titleText: "Mango"





}

ListElement {
titleText: "Orange"


}

ListElement {
titleText: "Grapes"


}
}

}

To copy to clipboard, switch view to plain text mode 

I need to change the color of the text.For example:for apple i need to use BLUE color and for Mango i need RED color and so on.

Regards,
Harish

[wysota]

Either store the color in the model and refer to that role from within the delegate or create a function that will return the colour based on the titleText and call that function from within the delegate:

color: determineColor(titleText)

color: determineColor(titleText)

To copy to clipboard, switch view to plain text mode