QtQuick Controls 2 ComboBox Customization



  • Hello,

    I am attempting to create a ComboBox with a custom look and feel. I have successfully changed the Background, Indicator, ContentItem, and Background; however, I have not been able to change the look of the drop-down menu. I have attempted to use the popup object, but have not been able to get the ListModel content to work. The examples shown here conveniently leave the popup out. My ComboBox code is shown below:

    ComboBox {
      id: groupSelect
      y: 3
      width: 85
      height: 33
      model: groupList
      anchors.verticalCenter: parent.verticalCenter
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: btnGroup.right
      anchors.leftMargin: 6
      contentItem: Text {
        color : "#ffffff"
        text: groupSelect.displayText
        font.family: "Arial";
        font.pixelSize: 16;
        verticalAlignment: Text.AlignVCenter;
        horizontalAlignment: Text.AlignLeft;
      }
      background: Rectangle{ 
        gradient: Gradient { 
          GradientStop { position: 0.0; color: "#69697C" } 
          GradientStop { position: 1.0; color: "#424251" }
        } 
      }
      indicator: Rectangle { }
      delegate: ItemDelegate {
        width: groupSelect.width
        height: groupSelect.height
        text: modelData
        highlighted: groupSelect.highlightedIndex == index
      }
      popup: Popup {
        id: groupPopup
        y: parent.height
        width: parent.width
        height: parent.height*parent.count
        contentHeight: height
        contentWidth: width
        contentItem: ListView {
          anchors.fill:groupPopup
          model: groupList
          boundsBehavior: Flickable.StopAtBounds
          highlight: Rectangle {
            color: "#69697C"
          }
          spacing: 6
          highlightFollowsCurrentItem: true
          delegate: Text {
            height: parent.height/parent.count
            text: key
            color: "#ffffff"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
          }
        }
        background: Rectangle { color: "#424251" }
      }
      textRole: "key"
      ListModel  {
        id: groupList
        ListElement { key: "Group 1"; }
        ListElement { key: "Group 2"; }
        ListElement { key: "Group 3"; }
      }
    }
    

    The end goal is to have a ComboBox dropdown that has a dark grey background, is editable, and highlights the hovered list item. The combobox should not have an indicator arrow.

    Thank you for your help. Let me know what else I can provide.



  • Hi. I can't run and test your code until next week, but meanwhile, you could check the built-in styles to see if you can notice something:

    The examples shown here conveniently leave the popup out.

    Hmm, there used to be a snippet extracted straight from the default ComboBox implementation. Even the QDoc markers are still there. :) Unfortunately, looks like the popup part went missing when we revised the customization docs to include standalone copy-pasteable snippets. Thanks for bringing this up, we'll include a customized popup to the docs.



  • @jpnurmi

    Thank you for the links, I've just about figured it out using those. I'll post my code to this thread when I get it working.

    Good to know it was in the plans to have that example in there - I was worried it was supposed to be obvious and I was just missing something!

    JL



  • I've worked it out. Here's my code for the ComboBox. It has the following behavior:

    • Currently selected value is highlighted
    • When "Enter" Pressed: ComboBox Closes/loses focus
    • No indicator
    • button has custom background

    Code is below:

    ComboBox {
      id: groupSelect
      y: 3
      width: 85
      height: 33
      model: groupList
      anchors.verticalCenter: parent.verticalCenter
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: btnGroup.right
      anchors.leftMargin: 6
    
      Keys.onPressed:
      {
          if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
          {
              groupSelect.focus = false
          }
      }
      contentItem: Text {
          color : "#ffffff"
          text: parent.displayText
          font.family: "Arial";
          font.pixelSize: 16;
          verticalAlignment: Text.AlignVCenter;
          horizontalAlignment: Text.AlignLeft;
      }
      background: Rectangle{
          gradient: Gradient {
              GradientStop {
                  position: 0.0;
                  color: "#69697C"
              }
              GradientStop { position: 1.0;
                  color: "#424251"
              }
          }
      }
      indicator: Rectangle { }
      delegate: ItemDelegate {
          width: groupSelect.width
          contentItem: Text {
              text:modelData;
              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
              font.family: "Arial";
              font.pixelSize: 16;
              color: "#ffffff"
          }
          onClicked:
          {
              groupSelect.currentIndex = index
              listview.currentIndex = index
          }
      }
      popup: Popup {
          id: groupPopup
          width: parent.width
          height: parent.height*parent.count
          implicitHeight: listview.contentHeight
          margins: 0
          background: Rectangle { color: "#424251" }
          contentItem: ListView {
              id: listview
              anchors.fill: parent
              model: groupSelect.model
              boundsBehavior: Flickable.StopAtBounds
              highlight: Rectangle { color: "#69697C" }
              spacing: 0
              highlightFollowsCurrentItem: true
              currentIndex: groupSelect.highlightedIndex
              delegate: groupSelect.delegate
          }
      }
      textRole: "key"
      ListModel
      {
          id: groupList
          ListElement { key: "Group 1"; }
          ListElement { key: "Group 2"; }
          ListElement { key: "Group 3"; }
      }
    }
    
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.