Results 1 to 2 of 2

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

  1. #1
    Join Date
    Nov 2011
    Posts
    45
    Qt products
    Qt4
    Platforms
    Symbian S60

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

    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:

    javascript Code:
    1. ListView {
    2. id: listview1
    3. x: 0
    4. y: 101
    5. width: 360
    6. height: 320
    7. anchors.verticalCenterOffset: 101
    8. anchors.horizontalCenterOffset: 0
    9. anchors.topMargin: 101
    10. anchors.horizontalCenter: parent.horizontalCenter
    11. anchors.verticalCenter: parent.verticalCenter
    12. anchors.top: parent.top
    13. spacing: 12
    14. flickDeceleration: 1748
    15. clip: true
    16.  
    17. header: ListHeading {
    18. ListItemText {
    19. text: "Fruits"
    20. id: text_edit2
    21. x: 100
    22. y: 303
    23. width: 182
    24. height: 34
    25. color: "blue"
    26.  
    27. font.family: "Times New Roman"
    28. font.pixelSize: 30
    29.  
    30.  
    31. anchors.fill: parent.paddingItem
    32. role: "Heading"
    33.  
    34.  
    35.  
    36. }
    37. }
    38. delegate: ListItem {
    39. id: listItem
    40. Column {
    41. anchors.fill: parent.paddingItem
    42. ListItemText {
    43. width: parent.width
    44. text: titleText
    45. color: "yellow"
    46. role: "Title"
    47. mode: listItem.mode
    48. }
    49.  
    50. }
    51. }
    52.  
    53. model: ListModel {
    54. ListElement {
    55.  
    56. titleText: "Apple"
    57.  
    58.  
    59.  
    60. }
    61.  
    62. ListElement {
    63. titleText: "Mango"
    64.  
    65.  
    66.  
    67.  
    68.  
    69. }
    70.  
    71. ListElement {
    72. titleText: "Orange"
    73.  
    74.  
    75. }
    76.  
    77. ListElement {
    78. titleText: "Grapes"
    79.  
    80.  
    81. }
    82. }
    83.  
    84. }
    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
    Last edited by wysota; 11th January 2012 at 11:27. Reason: missing [code] tags

  2. #2
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,363
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to add color to the List View Element in QML?

    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:
    javascript Code:
    1. color: determineColor(titleText)
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


Similar Threads

  1. how to access ith element of an qstring list?
    By aurora in forum Qt Programming
    Replies: 2
    Last Post: 18th October 2011, 09:37
  2. font color of list view
    By maarvi in forum Newbie
    Replies: 7
    Last Post: 8th May 2011, 16:07
  3. Replies: 9
    Last Post: 8th March 2011, 08:35
  4. List View with sections for alphabetialy sorted list
    By woodtluk in forum Qt Programming
    Replies: 4
    Last Post: 12th October 2010, 11:50
  5. Replies: 1
    Last Post: 3rd April 2010, 15:47

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.