qml定制菜单栏与Win关闭按钮产生一样的效果

qml定制菜单栏与Win关闭按钮产生一样的效果

win关闭按钮鼠标悬浮时是红色的背景，这种效果怎么产生的呢，请看下面的代码实现

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("定制标题栏")


    //color: "transparent"
    flags: Qt.Window | Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint | Qt.FramelessWindowHint

    //关闭按钮
    MouseArea{
        id: imgWinClose
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.top: parent.top
        anchors.right: parent.right
        width: 24
        height: 24

        Rectangle{
            anchors.fill: parent
            color: parent.containsMouse ? "#FF3E3D" : "#00000000"
        }

        Image{
            z: 1
            anchors.centerIn: parent
            sourceSize.width: 24
            sourceSize.height: 24
            source: parent.containsMouse ? "qrc:/image/icon_close.svg" : "qrc:/image/icon_close.svg"
        }

        onClicked: {
            console.log("close window================")
            close()
        }
    }

    //最大化按钮
    MouseArea{
        id: imgWinMax
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 24
        width: 24
        height: 24

        Rectangle{
            anchors.fill: parent
            color: parent.containsMouse ? "#CFD2DC" : "#00000000"
        }

        Image{
            z: 1
            anchors.centerIn: parent
            sourceSize.width: 24
            sourceSize.height: 24
            source: parent.containsMouse ? "qrc:/image/icon_max.svg" : "qrc:/image/icon_max.svg"
        }

        onClicked: {
            console.log("max window================")
            showMaximized()
        }
    }

    //最小化按钮
    MouseArea{
        id: imgWinMini
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 48
        width: 24
        height: 24

        Rectangle{
            anchors.fill: parent
            color: parent.containsMouse ? "#CFD2DC" : "#00000000"
        }

        Image{
            z: 1
            anchors.centerIn: parent
            sourceSize.width: 24
            sourceSize.height: 24
            source: parent.containsMouse ? "qrc:/image/iocn_mini.svg" : "qrc:/image/iocn_mini.svg"
        }

        onClicked: {
            console.log("max window================")
            showMinimized()
        }
    }

}

运行效果