How to change background qt quick controls 2 combobox ?

TheGringerEye

Hello all.
I need help to change background color delegate of combobox.
I tried change "Material.background" , but not change delegate background color(

ComboBox
{
    Material.background: "white"
    textRole: "key"
    model: ListModel
    {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }
}

Result:
alt text

Mammamia

@TheGringerEye
You should customize the combo box control.
refer this Customizing Combobox

TheGringerEye

@Mammamia I tried this, but were lost Material Design Effects such as Waves, ElevatorEffect and other.

Eeli K

@TheGringerEye said in How to change background qt quick controls 2 combobox ?:

@Mammamia I tried this, but were lost Material Design Effects such as Waves, ElevatorEffect and other.

I believe it shouldn't happen if you if replace only the delegate and not background etc.

ComboBox {
id: control
delegate: MenuItem {
        width: control.popup.width
        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
        Material.foreground: control.currentIndex === index ? control.popup.Material.accent : control.popup.Material.foreground
        highlighted: control.highlightedIndex === index
        hoverEnabled: control.hoverEnabled
    }
}

Here the delegate is copied from my Qt installation Qt/5.8/[compilerversion]/qml/QtQuick/Controls.2/Material/ComboBox.qml. Try adding Material.background to the delegate.

TheGringerEye

@Eeli-K Not working :(

ekkescorner

@TheGringerEye here's my custom combo box
perhaps gives you some ideas.
ComboBoxWithIcon.qml:

// this custom ComboBox works using a JS datamodel where the model is something like this:
// [{"imageName":"download.png", "itemText":qsTr("Download")}, ...]
// using same model as a QML ListModel you must change the delegate: model.imageName
// and contentItem: listModel.get(comboBox.currentIndex).imageName
ComboBox {
    id: comboBox
    focusPolicy: Qt.NoFocus
    property bool containsInvalidItems: false

    delegate: ItemDelegate {
                width: comboBox.width
                Material.foreground: comboBox.currentIndex === index ? comboBox.Material.accent : comboBox.Material.foreground
                highlighted: comboBox.highlightedIndex === index
                contentItem: Row {
                    spacing: 6
                    IconInactive {
                        imageName: modelData.imageName
                    }
                    LabelSubheading {
                        text: modelData.itemText
                        anchors.verticalCenter: parent.verticalCenter
                        font.strikeout: comboBox.containsInvalidItems && modelData.invalidItem
                    }
                }
            }

    contentItem:
        Row {
        // need some space to see the indicator
        // need some extra space for the rows to display Icon and text if displayText is used
        rightPadding: comboBox.displayText.length? 24+16 : 16
        spacing: 6
        IconInactive {
            visible: !comboBox.displayText.length
            imageName: comboBox.model[comboBox.currentIndex].imageName
        }
        LabelSubheading {
            text: comboBox.displayText.length? comboBox.displayText : comboBox.model[comboBox.currentIndex].itemText
            anchors.verticalCenter: parent.verticalCenter
            font.strikeout: comboBox.displayText.length? false : comboBox.containsInvalidItems && comboBox.model[comboBox.currentIndex].invalidItem
        }
    } // row
}

and here's how I'm using this ComboBox:

ComboBoxWithIcon {
    id: selectToursDropDown
    Layout.leftMargin: 6
    Layout.rightMargin: 6
    displayText: qsTr("Tour selection")
    model: [
        {"imageName":"schedule_my.png", "itemText":qsTr("Show my")},
        {"imageName":"schedule.png", "itemText":qsTr("Show all")},
        {"imageName":"directions.png", "itemText":qsTr("Transfer")},
        {"imageName":"download.png", "itemText":qsTr("Download")}
    ]
    onCurrentIndexChanged: {
        // do something
    }
}

LabelSubheading and IconInactive itself are also customized controls.
Take a look at my sample apps at github https://appbus.wordpress.com/category/qt-for-mobile/overview/

Eeli K

@TheGringerEye If the given examples don't work, you have to give more information. How the comboboxes are coded, created and used? Can you replicate the problem with a minimal app, created with the Qt Creator's wizard, where the combobox and the using code is in main.qml?

? Offline

Hi! Have a look at ComboBox.qml to see how the default implementation works. Should be easy to modify it to fit your needs.

TheGringerEye

@Eeli-K Background dont changed

Eeli K

@TheGringerEye So you want to change both the contentItem's and delegate's background to white? Can you paste the minimal app here?