DashTextField.qml
import QtQuick.Controls 2.0
import QtQuick 2.0
import QtGraphicalEffects 1.0
TextField {
id: root
property color checkedColor: "#D5DBDB"
signal doubleClicked(var/*MouseEvent*/ event)
placeholderText: qsTr("Please enter content")
font.family: "Arial"
font.pixelSize: 15
font.weight: Font.Thin
antialiasing: true
background: Rectangle {
implicitWidth: 213
implicitHeight: 42
radius: 8
color: root.enabled ? "transparent" :"#F4F6F6"
border.color: root.enabled ? root.checkedColor : "#D5DBDB"
border.width: 2
opacity: root.enabled ? 1 : 0.7
layer.enabled: root.hovered
layer.effect: DropShadow {
id: dropShadow
transparentBorder: true
color: root.checkedColor
samples: 10 /*20*/
}
}
cursorDelegate: Rectangle {
width: 1
height: parent.height * 0.4
color: root.checkedColor
visible: root.focus
Timer {
interval: 600
repeat: true
running: root.focus
onRunningChanged: parent.visible = running
onTriggered: parent.visible = !parent.visible
}
}
onDoubleClicked: selectAll()
/* note: This signal was introduced in QtQuick.Controls 2.1 (Qt 5.8). */
onPressed: {
_private.mouseEvent = event
_private.isCheckDoubleClickedEvent++
if (! _checkDoubleClickedEventTimer.running)
_checkDoubleClickedEventTimer.restart()
}
/* Private */
Item {
id: _private
property int isCheckDoubleClickedEvent: 0
property var/*MouseEvent*/ mouseEvent
Timer {
id: _checkDoubleClickedEventTimer
running: false
repeat: false
interval: 180
onTriggered: {
if (_private.isCheckDoubleClickedEvent >= 2) {
/* Double Clicked Event */
root.doubleClicked(_private.mouseEvent)
}
stop()
_private.isCheckDoubleClickedEvent = 0
}
}
}
}
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:30
width: root.width
rows: 3
columns: 3
Repeater {
id: textFieldRepeater
model: ["#727CF5", "#0ACF97", "#F9375E",
"#FFBC00", "#2B99B9", "#5A6268",
"#EEF2F7", "#212730"]
DashTextField {
checkedColor: modelData
}
}
DashTextField {
enabled: false
placeholderText: "Disabled state"
}
}
}
