Customiza ComboBox in QML

[A Former User]

hi, i want to make a combobox like in the photo. When the Combobox is opened, I want to select only the country flags in the options, how can I do this?

[raven-worx]

@NullByte
you can customize ComboBox (QtQuickControls2)
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

[A Former User]

@raven-worx said in Customiza ComboBox in QML:

@NullByte
you can customize ComboBox (QtQuickControls2)
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

Thank you but it didn't work for me. I can't circle the pictures. Can you check my code?

ComboBox {
    id: control
    model: ["https://flagcdn.com/128x96/ca.png", "https://flagcdn.com/128x96/tr.png", "https://flagcdn.com/128x96/ru.png"]

    contentItem: Rectangle {
        width: 24
        height: 24
        radius: 20
        clip: true

        Image {
            anchors.fill: parent
            source: control.currentValue
            clip: true
        }
    }
}

[raven-worx]

@NullByte said in Customiza ComboBox in QML:
clipping only works along item boundaries (x and y) - for performance reasons i guess.

try this:

contentItem: Item {
    width: 24
    height: 24
    
    Image {
        id: img

        anchors.fill: parent
        source: control.currentValue
        clip: true

        layer.enabled: true
        layer.effect: OpacityMask {
             maskSource: mask
       }
   }
   
   Rectangle {
         id: mask
    
         radius: 20
         clip: true    
         visible: false
         anchors.fill: img
   }
}

or without the layer property, like in the docs.

[A Former User]

@raven-worx said in Customiza ComboBox in QML:

@NullByte said in Customiza ComboBox in QML:
clipping only works along item boundaries (x and y) - for performance reasons i guess.

try this:

contentItem: Item {
    width: 24
    height: 24
    
    Image {
        id: img

        anchors.fill: parent
        source: control.currentValue
        clip: true

        layer.enabled: true
        layer.effect: OpacityMask {
             maskSource: mask
       }
   }
   
   Rectangle {
         id: mask
    
         radius: 20
         clip: true    
         visible: false
         anchors.fill: img
   }
}

or without the layer property, like in the docs.

@raven-worx It's not work for me. Check this.

RowLayout {
    anchors.fill: parent
    spacing: 0

    ComboBox {
        id: control
        model: ["https://flagcdn.com/128x96/ca.png", "https://flagcdn.com/128x96/tr.png", "https://flagcdn.com/128x96/ru.png"]

        Layout.leftMargin: 20

        contentItem: Item {
            width: 24 * dp
            height: 24 * dp

            Image {
                id: img
                anchors.fill: parent
                source: control.currentValue
                clip: true

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: mask
                }
            }

            Rectangle {
                id: mask
                radius: 20
                clip: true
                visible: false
                anchors.fill: img

            }
        }
    }
}

And result

[A Former User]

Any idea ?

[raven-worx]

@NullByte
this works for me:

ComboBox {
        id: control
        model: ["https://flagcdn.com/128x96/ca.png", "https://flagcdn.com/128x96/tr.png", "https://flagcdn.com/128x96/ru.png"]

        contentItem: Item {
            clip: true

            Image {
                id: img

                height: parent.height
                width: height
                sourceSize {
                    width: img.width
                    height: img.height
                }
                source: control.currentValue
                clip: true
                fillMode: Image.PreserveAspectCrop

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: mask
                }
            }

            Rectangle {
                id: mask
                radius: 20
                clip: true
                visible: false
                anchors.fill: img
            }
        }
    }

[A Former User]

It's work. Thanks

Result