Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Quick Controls 2 Combobox change color of each item on the dropdown list

QML Quick Controls 2 Combobox change color of each item on the dropdown list

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
combobox stylecolor
4 Posts 3 Posters 2.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Markus Ippy
    wrote on 7 Apr 2019, 20:20 last edited by Markus Ippy 4 Jul 2019, 20:20
    #1

    I am trying to make a very limited color picker with some predfined colors .
    I would like to show the user the actual color when they click on the dropdown button .
    Is there a way to color each line of the drop down indivudally with the color in the model ?

       ComboBox {
        id: usercolor
        x: 600
        y: 0
        width: 200
        height: 50
        model:["aliceblue","antiquewhite","aqua","aquamarine","azure"]
        visible: true
    }
    
    1 Reply Last reply
    0
    • S Offline
      S Offline
      sierdzio
      Moderators
      wrote on 8 Apr 2019, 06:12 last edited by
      #2

      Use the delegate property.

      (Z(:^

      1 Reply Last reply
      0
      • S Offline
        S Offline
        Shrinidhi Upadhyaya
        wrote on 8 Apr 2019, 06:19 last edited by
        #3

        Hi @Markus-Ippy , you can use the delegate property.

        Here is the sample code:-

         ListModel {
                id: colorModel
        
                ListElement {
                    itemColor: "aliceblue"
                }
        
                ListElement {
                    itemColor: "antiquewhite"
                }
        
                ListElement {
                    itemColor: "aqua"
                }
        
                ListElement {
                    itemColor: "aquamarine"
                }
        
                ListElement {
                    itemColor: "azure"
                }
            }
        
            ComboBox {
                id: control
                height: 50
                width: 200
                model: colorModel
        
                delegate: Rectangle {
                    width: control.width
                    height: 100
                    color:  itemColor
        
                    Text {
                        text: itemColor
                        anchors.centerIn: parent
                    }
                }
            }
        

        Shrinidhi Upadhyaya.
        Upvote the answer(s) that helped you to solve the issue.

        M 1 Reply Last reply 8 Apr 2019, 07:31
        4
        • S Shrinidhi Upadhyaya
          8 Apr 2019, 06:19

          Hi @Markus-Ippy , you can use the delegate property.

          Here is the sample code:-

           ListModel {
                  id: colorModel
          
                  ListElement {
                      itemColor: "aliceblue"
                  }
          
                  ListElement {
                      itemColor: "antiquewhite"
                  }
          
                  ListElement {
                      itemColor: "aqua"
                  }
          
                  ListElement {
                      itemColor: "aquamarine"
                  }
          
                  ListElement {
                      itemColor: "azure"
                  }
              }
          
              ComboBox {
                  id: control
                  height: 50
                  width: 200
                  model: colorModel
          
                  delegate: Rectangle {
                      width: control.width
                      height: 100
                      color:  itemColor
          
                      Text {
                          text: itemColor
                          anchors.centerIn: parent
                      }
                  }
              }
          
          M Offline
          M Offline
          Markus Ippy
          wrote on 8 Apr 2019, 07:31 last edited by
          #4

          @Shrinidhi-Upadhyaya
          Thank you that was exactly what i was after

          1 Reply Last reply
          0

          1/4

          7 Apr 2019, 20:20

          • Login

          • Login or register to search.
          1 out of 4
          • First post
            1/4
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved