adding a button on QT/QML drop down item - qt

Question

I want to style my QML based combo/dropdown box so that each item will have a "delete" button on it like so
How can I achieve this? is there any article or links I can refer to to achieve this?
I am using QML to design the widget.

Answer 1

You can simply customize a QC2 combobox starting from here:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox
To this:
import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle {
id: root
width: 400
height: 400
ComboBox {
id: control
x: 50
y: 50
model: ["My Brackets 2021", "New Preset 22", "Super Br1", "New thingy", "Element of that list"]
delegate: ItemDelegate {
width: control.width - 20
contentItem: Text {
text: modelData
color: "#787878"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
Button {
x: parent.width - 25
y: (parent.height - height) / 2
width: 30
height: 30
text: "\u26CC"
onClicked: { /* --Perform delete action here-- */ }
}
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#B4C8DA";
context.fill();
}
}
contentItem: Text {
leftPadding: 10
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#787878"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 250
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#B4C8DA"
border.width: control.visualFocus ? 2 : 1
radius: 20
}
popup: Popup {
y: control.height + 3
width: control.width
implicitHeight: contentItem.implicitHeight + 20
padding: 10
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
border.color: "#B4C8DA"
radius: 20
}
}
}
}
Will look like this: