Qt Quick QML Customize ComboBox Popup

Question

I am trying to customize the QML 2.14 ComboBox.
I did follow the below link but I am not able to customize the ComboBox -> Popup -> ListView -> "delegate"
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

I want to have diffrent Text Color for the list item displayed inside the ComboBox Popup.

ComboBox {
   id: myComboBox
   model: ["First", "Second", "Third"]

   popup: Popup {
      y: myComboBox.height - 1
      width: parent.width
      implicitHeight: contentItem.implicitHeight
 
      contentItem: ListView {
          clip: true
          anchors.fill: parent
          model: myComboBox.popup.visible ? myComboBox.delegateModel : null
          ScrollIndicator.vertical: ScrollIndicator {}

          delegate: Text {
              width: parent.width
              height: 30
              text: "Test" // How to access flat model, modelData is null and model.get(index) is not allowed in .ui.qml  
              color: "#ffffff"
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.left: parent.left
          }

          highlight: Rectangle { color: "yellow" } 
      }
   }
}

But I always see some default list with black text, in the combobox popup.
Also not able to apply the highlight to selected line in the popup.

JarMan JarMan · Accepted Answer · 2020-11-30T14:48:19

The Combobox's model is a DelegateModel. That means the delegate is attached to the model. So trying to set the ListView's delegate will not have any effect. But the Combobox has its own delegate property that you can set.

ComboBox {
    delegate: Text {
        width: parent.width
        height: 30
        text: modelData
        color: "#ffffff"
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

Qt Quick QML Customize ComboBox Popup

1 Answers