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. [SOLVED]A problem in ComboBox with image

[SOLVED]A problem in ComboBox with image

Scheduled Pinned Locked Moved QML and Qt Quick
comboboxqml
2 Posts 2 Posters 1.2k 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.
  • B Offline
    B Offline
    beidaochuan
    wrote on last edited by beidaochuan
    #1

    Hi,
    i would like to place icon to the dropdown list, so I made some codes like this:

    ......
    
    model: ListModel {
            id: cbItems
            ListElement { text: ""; iconSource: "image1"}
            ListElement { text: ""; iconSource: "image2"}
        }
    
    __dropDownStyle: MenuStyle {
                id: dropDownMenuStyle
                frame: dropDownMenuStyleFrame
    //            __menuItemType: "comboboxitem"
                itemDelegate.label: Rectangle {
                    width: root.width - 50
                    height: root.height
                    color: "transparent"
                    Image {
                        id: operatorPic
                        width: height
                        height: operatorPictureHeight
                        anchors {
                            left: parent.left
                            leftMargin: 2
                            verticalCenter: parent.verticalCenter
                        }
                        source: operatorPic.height === 0 ? "" : styleData.iconSource
                    }
                    ITextLabel {
                        width: parent.width - operatorPic.width - 2 - 5
                        height: parent.height
                        fontSize: 20
                        fontColor: styleData.selected ? "white" : "black"
                        text: styleData.text
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        horizontalAlignment: Text.AlignLeft
                        anchors.left: operatorPic.right
                        anchors.leftMargin: 5
                    }
                }
    
                itemDelegate.background: Rectangle {
                    z: 1
                    opacity: 0.5
                    height: root.height
                    color: styleData.selected ? "#0098DF" : "transparent"
                }
        }
    

    I know source: operatorPic.height === 0 ? "" : styleData.iconSource does not work but I have no idea how to deal with it.

    Does anybody tell me how to do it?
    Thanks.

    p3c0P 1 Reply Last reply
    0
    • B beidaochuan

      Hi,
      i would like to place icon to the dropdown list, so I made some codes like this:

      ......
      
      model: ListModel {
              id: cbItems
              ListElement { text: ""; iconSource: "image1"}
              ListElement { text: ""; iconSource: "image2"}
          }
      
      __dropDownStyle: MenuStyle {
                  id: dropDownMenuStyle
                  frame: dropDownMenuStyleFrame
      //            __menuItemType: "comboboxitem"
                  itemDelegate.label: Rectangle {
                      width: root.width - 50
                      height: root.height
                      color: "transparent"
                      Image {
                          id: operatorPic
                          width: height
                          height: operatorPictureHeight
                          anchors {
                              left: parent.left
                              leftMargin: 2
                              verticalCenter: parent.verticalCenter
                          }
                          source: operatorPic.height === 0 ? "" : styleData.iconSource
                      }
                      ITextLabel {
                          width: parent.width - operatorPic.width - 2 - 5
                          height: parent.height
                          fontSize: 20
                          fontColor: styleData.selected ? "white" : "black"
                          text: styleData.text
                          wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                          horizontalAlignment: Text.AlignLeft
                          anchors.left: operatorPic.right
                          anchors.leftMargin: 5
                      }
                  }
      
                  itemDelegate.background: Rectangle {
                      z: 1
                      opacity: 0.5
                      height: root.height
                      color: styleData.selected ? "#0098DF" : "transparent"
                  }
          }
      

      I know source: operatorPic.height === 0 ? "" : styleData.iconSource does not work but I have no idea how to deal with it.

      Does anybody tell me how to do it?
      Thanks.

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi @beidaochuan
      You have styleData.index and access to the model. Combine it and use

      source: cbItems.get(styleData.index).iconSource
      

      157

      1 Reply Last reply
      0

      • Login

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