DashDropDown.qml
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
ComboBox {
id: root
property color checkedColor: "#1ABC9C"
delegate: ItemDelegate {
width: root.width
contentItem: Text {
text: modelData
color: root.highlightedIndex === index ? "white" : "black"
font.family: "Arial"
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
background: Rectangle {
width: parent.width
height: parent.height
color: root.highlightedIndex === index ? root.checkedColor : "#F3F4F5"
}
}
indicator: Canvas {
id: canvas
x: root.width - width - 10
y: (root.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: root
onPressedChanged: canvas.requestPaint()
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = "white"
context.fill();
}
}
contentItem: Item {
width: root.background.width - root.indicator.width - 10
height: root.background.height
Text {
anchors.verticalCenter: parent.verticalCenter
x: 10
text: root.displayText
elide: Text.ElideRight
font.pixelSize: 15
font.family: "Arial"
font.weight: Font.Thin
color: root.down ? Qt.rgba(255, 255, 255, 0.75) : "white"
}
}
background: Rectangle {
implicitWidth: 102
implicitHeight: 41
color: root.down ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
radius: 5
layer.enabled: root.hovered | root.down
layer.effect: DropShadow {
transparentBorder: true
color: root.checkedColor
samples: 10 /*20*/
}
}
popup: Popup {
y: root.height - 1
width: root.width
implicitHeight: contentItem.implicitHeight
padding: 0
contentItem: ListView {
implicitHeight: contentHeight
model: root.popup.visible ? root.delegateModel : null
clip: true
currentIndex: root.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#F3F4F5"
radius: 5
clip: true
layer.enabled: root.hovered | root.down
layer.effect: DropShadow {
transparentBorder: true
color: "#F3F4F5"
samples: 10
}
}
}
}
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
Window {
id:root
width: 640
height: 480
visible: true
title: qsTr("QML FLAT Style Custom DropDown")
GridLayout {
y:50
width: root.width
rows: 3
columns: 3
Repeater {
id: comboboxRepeater
model: ["#727CF5", "#0ACF97", "#F9375E",
"#FFBC00", "#2B99B9", "#5A6268",
"#EEF2F7", "#212730", "#3498DB"]
DashDropDown {
model: ["First", "Second", "Third"]
checkedColor: modelData
}
}
}
}
