SepantaUIKit/SepantaUiKit/SKBtn/SKBtn.qml

import QtQuick 2.13
import QtQml 2.13
import "qrc:/SepantaUiKit"

Item {
    id: root
    width: 140
    height: 50
    property bool isEnable: true
    onIsEnableChanged: enableHandle()
    function enableHandle() {
        if (isEnable) {
            stateOfComponent = Setting.Enable
        } else {
            stateOfComponent = Setting.Disabel
        }
    }

    property var stateOfComponent: Setting.Enable
    onStateOfComponentChanged: stateChanged()
    property alias text: idText.text
    Rectangle {
        id: idBackGround
        anchors.fill: parent
        radius: Setting.radius

        Text {
            id: idText
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            color: Colors.balck
            font: Fonts.h3
            Component.onCompleted: console.log(JSON.stringify(idText.fontInfo))
        }
        Behavior on color {
            ColorAnimation {
                duration: Setting.animationDuration
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onHoveredChanged: {
            if (isEnable) {
                if (containsMouse) {
                    stateOfComponent = Setting.Hoverd
                } else {
                    stateOfComponent = Setting.Enable
                }
            }
        }
        onPressed: {
            if (isEnable) {
                stateOfComponent = Setting.Pressed
            }
        }
        onReleased: {
            if (isEnable) {
                stateOfComponent = Setting.Enable
            }
        }
    }

    function stateChanged() {
        switch (stateOfComponent) {
        case Setting.Enable:
            idBackGround.color = Colors.primaryEnable
            break
        case Setting.Pressed:
            idBackGround.color = Colors.primaryPressed
            break
        case Setting.Hoverd:
            idBackGround.color = Qt.lighter(Colors.primaryEnable, 1.07)
            break
        case Setting.Disabel:
            idBackGround.color = Qt.darker(Colors.primaryEnable, 4)
            break
        }
    }

    Component.onCompleted: {
        enableHandle()
        stateChanged()
    }
}