Solved Customiza ComboBox in QML
-
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?
-
@NullByte
you can customize ComboBox (QtQuickControls2)
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox -
@raven-worx said in Customiza ComboBox in QML:
@NullByte
you can customize ComboBox (QtQuickControls2)
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-comboboxThank 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 } } }
-
@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 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
-
Any idea ?
-
@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 } } }
-
It's work. Thanks
Result