Flat style Qml input box || Custom Input TextField || Qt/QML TextField

Info Thread
By -
0

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"
        }
    }


}

 

 

Tags:

Post a Comment

0Comments

Post a Comment (0)