QtQuick Controls 2 ComboBox Customization

JLimbocker · wrote on 15 Jul 2016, 21:51

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.

jpnurmi · 18 Jul 2016, 17:05

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.

JLimbocker · wrote on 18 Jul 2016, 17:05

@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

JLimbocker · wrote on 18 Jul 2016, 18:01

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"; }
  }
}