QML自定义控件之退出对话框

QML自定义控件之退出对话框

1、效果

2、代码

import QtQuick 2.0
import QtQuick.Controls 2.14

Rectangle {
    width: 420
    height: 190
    radius: 10
    color: "#B0BDEA"

    property color quitnormalColor: "#0E5FAA"
    //"14,95,170" 设置#值透明度：每个值除以255
    property color quithoveredColor: Qt.rgba(14/255,95/255,170/255, 0.9) 

    property color normalColor: "#FFFFFF"
    property color textnormalColor: "#000000"
    property color hoveredColor: "#FFFFFF"
    property color pressedColor: "#BBB3B3"
    property color releaseColor: "#FFFFFF"

    Text {
        id: quitMaxText
        x: 15
        y: 22
        font.family: "黑体"
        font.pixelSize: 40
        font.bold: true

        text: qsTr("退出")
    }

    Text {
        id: infor
        x: 15
        y: 86
        font.family: "黑体"
        font.pixelSize: 16
        text: qsTr("确定要退出程序吗?")
    }

    Rectangle {
        id:cancle
        x:15
        y:136
        width: 110
        height: 35
        radius: 5
        Text {
            id: cancletext
            width: 60
            height: 15
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            x: (cancle.width-cancletext.width)/2
            y: (cancle.height-cancletext.height)/2
            font.pixelSize: 16
            font.family: "黑体"
            text: qsTr("取消")
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(qsTr(cancletext.text))
            }

            onPressed: {
                cancletext.color = pressedColor
            }

            onReleased: {
                cancletext.color = textnormalColor
            }
        }
    }

    Rectangle {
        id:min
        x:145
        y:136
        width: 130
        height: 35
        radius: 5
        Text {
            id: mintext
            width: 60
            height: 15
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            x: (min.width-mintext.width)/2
            y: (min.height-mintext.height)/2
            font.pixelSize: 16
            font.family: "黑体"
            text: qsTr("最小化")

        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(qsTr(mintext.text))
            }

            onPressed: {
                mintext.color = pressedColor
            }

            onReleased: {
                console.log("释放")
                mintext.color = textnormalColor
            }

            onEntered: {
                console.log("悬浮")
            }

            onExited: {
                console.log("离开")
            }
        }
    }


    Rectangle {
        id: quit
        x:295
        y:136
        width: 110
        height: 35
        radius: 5
        color: "#0E5FAA"

        states: [
            State {
                name: "pressed"
                PropertyChanges {
                    target: quit
                    color: pressedColor

                }
            },

            State {
                name: "hovereded"
                PropertyChanges {
                    target: quit
                    color: hoveredColor

                }
            }
        ]
        Text {
            id: quittext
            width: 60
            height: 15
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            x: (quit.width-quittext.width)/2
            y: (quit.height-quittext.height)/2
            font.pixelSize: 16
            color: "#FFFFFF"
            text: qsTr("退出")
            font.family: "黑体"
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                console.log(qsTr(quittext.text))
            }
            onPressed: {
                quittext.color = pressedColor
            }

            onReleased: {
                console.log("释放")
                quit.color = quitnormalColor
                quittext.color = releaseColor
            }

            onEntered: {
                console.log("悬浮")
                quit.color = quithoveredColor
            }

            onExited: {
                console.log("离开")
                quit.color = quitnormalColor
            }

        }
    }
}

3、结论

通过用一个大的Rectangle作为弹窗，可以根据程序整体背景设置弹窗的背景颜色，也就是大Rectangle的背景
颜色；再通过使用3个小Rectangle来实现按钮的不同状态显示的效果。用过这样自定义的控件，可以使我们的
程序更加美观。合作联系方式QQ(786453398)