實現效果

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

實現思路

首先，我們需要獲取桌面大小，然后 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: controlvisible: falsecolor: "transparent"//透明度opacity: 0//無邊框-提示框flags: Qt.FramelessWindowHint | Qt.ToolTip//默認非模態modality: Qt.NonModal//初始位置，在屏幕右下角x: Screen.desktopAvailableWidth-widthy: Screen.desktopAvailableHeight//大小綁定width: content_loader.widthheight: content_loader.height+title_item.height//標題property alias title: title_text.text//內容property alias content: content_loader.sourceComponentMouseArea{id: tip_mouseanchors.fill: parenthoverEnabled: true}//標題欄Rectangle{id: title_itemheight: 30width: control.width//標題文字Text {id: title_textanchors{verticalCenter: parent.verticalCenterleft: parent.leftleftMargin: 10}}//關閉按鈕-可以用image替換Rectangle{//不能綁定text大小，不然會變width: 60height: 20anchors{verticalCenter: parent.verticalCenterright: parent.rightrightMargin: 10}color: close_mouse.containsMouse?"gray":"white"border.color: "black"Text {id: close_textanchors.centerIn: parent//鼠標放上去顯示關閉，否則顯示倒計時text: (close_mouse.containsMouse||close_timer.time_count<1)? qsTr("Close"): close_timer.time_count+" S"}MouseArea{id: close_mouseanchors.fill: parenthoverEnabled: trueonClicked: control.hideTip()}//關閉倒計時Timer{id: close_timerproperty int time_count: 0interval: 1000repeat: trueonTriggered: {//倒計時為0，且鼠標不在上面if(time_count<1&&!tip_mouse.containsMouse&&!close_mouse.containsMouse){hideTip();}else{time_count--;}}}}}//用于加載內容Loader{id: content_loaderanchors.top: title_item.bottom}//顯示-動畫組ParallelAnimation{id: show_anim//透明度-從透明到顯示NumberAnimation{target: controlproperty: "opacity"//從當前值到顯示from: control.opacityto: 1duration: 2000}//位置NumberAnimation{target: controlproperty: "y"//從當前值到顯示from: control.yto: Screen.desktopAvailableHeight-heightduration: 2000}//動畫開始，顯示窗口onStarted: {close_timer.time_count=5control.show()}//動畫結束啟動關閉倒計時onFinished: {close_timer.start()}}//關閉-動畫組ParallelAnimation{id: hide_anim//透明度-從顯示到透明NumberAnimation{target: controlproperty: "opacity"//從當前值到隱藏from: control.opacityto: 0duration: 2000}//位置NumberAnimation{target: controlproperty: "y"//從當前值到隱藏from: control.yto: Screen.desktopAvailableHeightduration: 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: poptitle: qsTr("DesktopTip")content: Rectangle{width: 300height: 200color: "green"Text {anchors.centerIn: parenttext: qsTr("DesktopTip")}//測試上層也有個MouseArea對對話框的MouseArea影響MouseArea{anchors.fill: parent//目前還不能設置hoverEnabled，不然parent的MouseArea沒法判斷//hoverEnabled: true}}}}

?

總結

以上是生活随笔為你收集整理的QML实现桌面右下角弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。