QML實現桌面右下角彈窗

實現效果

這次製作的桌面右下角彈窗，主要功能有透明度和位置動畫、定時關閉、鼠標放在上面暫留。

實現思路

首先，我們需要獲取桌面大小，然後 move 到右下角去，這裏藉助的 Screen：

//初始位置，在屏幕右下角
x: Screen.desktopAvailableWidth-width
y: Screen.desktopAvailableHeight

對於動畫，我用的屬性動畫配合動畫組。顯示時先啓動顯示動畫，動畫結束啓動關閉定時器，關閉時調用關閉動畫。

對於內容區域，我直接放了一個 Loader ，這樣就可以根據自己的需求放需要的組件在裏面。

目前鼠標放在上面暫留的功能待完善（如果內容區域 MouseArea 帶 hover 就沒法判斷了）；也沒有對模態框關係進行處理。

實現代碼

完整代碼鏈接（DesktopTip類型）：https://github.com/gongjianbo/QmlComponentStyle/tree/master/CustomComponent

實現代碼：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

//桌面右下角彈框
//使用時給content賦值一個Item展示內容，
//如content: Rectangle{}
//目前還存在得問題：
//1.被模態框阻塞無法點擊
//2.鼠標是否hover的判斷，會被content的MouseArea遮蓋，
//要麼content的MouseArea不設置hoverEnable
Window {
    id: control
    visible: false
    color: "transparent"
    //透明度
    opacity: 0
    //無邊框-提示框
    flags: Qt.FramelessWindowHint | Qt.ToolTip
    //默認非模態
    modality: Qt.NonModal
    //初始位置，在屏幕右下角
    x: Screen.desktopAvailableWidth-width
    y: Screen.desktopAvailableHeight
    //大小綁定
    width: content_loader.width
    height: content_loader.height+title_item.height
    //標題
    property alias title: title_text.text
    //內容
    property alias content: content_loader.sourceComponent

    MouseArea{
        id: tip_mouse
        anchors.fill: parent
        hoverEnabled: true
    }
    //標題欄
    Rectangle{
        id: title_item
        height: 30
        width: control.width
        //標題文字
        Text {
            id: title_text
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: 10
            }
        }
        //關閉按鈕-可以用image替換
        Rectangle{
            //不能綁定text大小，不然會變
            width: 60
            height: 20
            anchors{
                verticalCenter: parent.verticalCenter
                right: parent.right
                rightMargin: 10
            }
            color: close_mouse.containsMouse?"gray":"white"
            border.color: "black"
            Text {
                id: close_text
                anchors.centerIn: parent
                //鼠標放上去顯示關閉，否則顯示倒計時
                text: (close_mouse.containsMouse||close_timer.time_count<1)
                      ? qsTr("Close")
                      : close_timer.time_count+" S"
            }
            MouseArea{
                id: close_mouse
                anchors.fill: parent
                hoverEnabled: true
                onClicked: control.hideTip()
            }
            //關閉倒計時
            Timer{
                id: close_timer
                property int time_count: 0
                interval: 1000
                repeat: true
                onTriggered: {
                    //倒計時爲0，且鼠標不在上面
                    if(time_count<1&&
                            !tip_mouse.containsMouse&&
                            !close_mouse.containsMouse){
                        hideTip();
                    }else{
                        time_count--;
                    }
                }
            }
        }
    }
    //用於加載內容
    Loader{
        id: content_loader
        anchors.top: title_item.bottom
    }

    //顯示-動畫組
    ParallelAnimation{
        id: show_anim
        //透明度-從透明到顯示
        NumberAnimation{
            target: control
            property: "opacity"
            //從當前值到顯示
            from: control.opacity
            to: 1
            duration: 2000
        }
        //位置
        NumberAnimation{
            target: control
            property: "y"
            //從當前值到顯示
            from: control.y
            to: Screen.desktopAvailableHeight-height
            duration: 2000
        }
        //動畫開始，顯示窗口
        onStarted: {
            close_timer.time_count=5
            control.show()
        }
        //動畫結束啓動關閉倒計時
        onFinished: {
            close_timer.start()
        }
    }

    //關閉-動畫組
    ParallelAnimation{
        id: hide_anim
        //透明度-從顯示到透明
        NumberAnimation{
            target: control
            property: "opacity"
            //從當前值到隱藏
            from: control.opacity
            to: 0
            duration: 2000
        }
        //位置
        NumberAnimation{
            target: control
            property: "y"
            //從當前值到隱藏
            from: control.y
            to: Screen.desktopAvailableHeight
            duration: 2000
        }
        //結束動畫開始
        onStarted: {
            close_timer.time_count=0
        }
        //動畫結束關閉窗口
        onFinished: {
            close_timer.stop()
            control.close()
        }
    }

    //顯示彈框
    function showTip()
    {
        hide_anim.stop()
        show_anim.start()
    }
    //隱藏彈框
    function hideTip()
    {
        show_anim.stop()
        hide_anim.start()
    }
}

調用：

            //桌面右下角彈框
            Button{
                text: "Pop"
                onClicked: pop.showTip()
                //桌面右下角彈框
                CustomDesktopTip{
                    id: pop
                    title: qsTr("DesktopTip")
                    content: Rectangle{
                        width: 300
                        height: 200
                        color: "green"
                        Text {
                            anchors.centerIn: parent
                            text: qsTr("DesktopTip")
                        }
                        //測試上層也有個MouseArea對對話框的MouseArea影響
                        MouseArea{
                            anchors.fill: parent
                            //目前還不能設置hoverEnabled，不然parent的MouseArea沒法判斷
                            //hoverEnabled: true
                        }
                    }
                }
            }