實(shí)現(xiàn)效果

這次制作的桌面右下角彈窗，主要功能有透明度和位置動(dòng)畫、定時(shí)關(guān)閉、鼠標(biāo)放在上面暫留。

實(shí)現(xiàn)思路

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

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

對(duì)于動(dòng)畫，我用的屬性動(dòng)畫配合動(dòng)畫組。顯示時(shí)先啟動(dòng)顯示動(dòng)畫，動(dòng)畫結(jié)束啟動(dòng)關(guān)閉定時(shí)器，關(guān)閉時(shí)調(diào)用關(guān)閉動(dòng)畫。

對(duì)于內(nèi)容區(qū)域，我直接放了一個(gè) Loader ，這樣就可以根據(jù)自己的需求放需要的組件在里面。

目前鼠標(biāo)放在上面暫留的功能待完善（如果內(nèi)容區(qū)域 MouseArea 帶 hover 就沒(méi)法判斷了）；也沒(méi)有對(duì)模態(tài)框關(guān)系進(jìn)行處理。

實(shí)現(xiàn)代碼

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

實(shí)現(xiàn)代碼：

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12//桌面右下角彈框 //使用時(shí)給content賦值一個(gè)Item展示內(nèi)容， //如content: Rectangle{} //目前還存在得問(wèn)題： //1.被模態(tài)框阻塞無(wú)法點(diǎn)擊 //2.鼠標(biāo)是否hover的判斷，會(huì)被content的MouseArea遮蓋， //要么content的MouseArea不設(shè)置hoverEnable Window {id: controlvisible: falsecolor: "transparent"//透明度opacity: 0//無(wú)邊框-提示框flags: Qt.FramelessWindowHint | Qt.ToolTip//默認(rèn)非模態(tài)modality: Qt.NonModal//初始位置，在屏幕右下角x: Screen.desktopAvailableWidth-widthy: Screen.desktopAvailableHeight//大小綁定width: content_loader.widthheight: content_loader.height+title_item.height//標(biāo)題property alias title: title_text.text//內(nèi)容property alias content: content_loader.sourceComponentMouseArea{id: tip_mouseanchors.fill: parenthoverEnabled: true}//標(biāo)題欄Rectangle{id: title_itemheight: 30width: control.width//標(biāo)題文字Text {id: title_textanchors{verticalCenter: parent.verticalCenterleft: parent.leftleftMargin: 10}}//關(guān)閉按鈕-可以用image替換Rectangle{//不能綁定text大小，不然會(huì)變width: 60height: 20anchors{verticalCenter: parent.verticalCenterright: parent.rightrightMargin: 10}color: close_mouse.containsMouse?"gray":"white"border.color: "black"Text {id: close_textanchors.centerIn: parent//鼠標(biāo)放上去顯示關(guān)閉，否則顯示倒計(jì)時(shí)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()}//關(guān)閉倒計(jì)時(shí)Timer{id: close_timerproperty int time_count: 0interval: 1000repeat: trueonTriggered: {//倒計(jì)時(shí)為0，且鼠標(biāo)不在上面if(time_count<1&&!tip_mouse.containsMouse&&!close_mouse.containsMouse){hideTip();}else{time_count--;}}}}}//用于加載內(nèi)容Loader{id: content_loaderanchors.top: title_item.bottom}//顯示-動(dòng)畫組ParallelAnimation{id: show_anim//透明度-從透明到顯示NumberAnimation{target: controlproperty: "opacity"//從當(dāng)前值到顯示from: control.opacityto: 1duration: 2000}//位置NumberAnimation{target: controlproperty: "y"//從當(dāng)前值到顯示from: control.yto: Screen.desktopAvailableHeight-heightduration: 2000}//動(dòng)畫開始，顯示窗口onStarted: {close_timer.time_count=5control.show()}//動(dòng)畫結(jié)束啟動(dòng)關(guān)閉倒計(jì)時(shí)onFinished: {close_timer.start()}}//關(guān)閉-動(dòng)畫組ParallelAnimation{id: hide_anim//透明度-從顯示到透明NumberAnimation{target: controlproperty: "opacity"//從當(dāng)前值到隱藏from: control.opacityto: 0duration: 2000}//位置NumberAnimation{target: controlproperty: "y"//從當(dāng)前值到隱藏from: control.yto: Screen.desktopAvailableHeightduration: 2000}//結(jié)束動(dòng)畫開始o(jì)nStarted: {close_timer.time_count=0}//動(dòng)畫結(jié)束關(guān)閉窗口onFinished: {close_timer.stop()control.close()}}//顯示彈框function showTip(){hide_anim.stop()show_anim.start()}//隱藏彈框function hideTip(){show_anim.stop()hide_anim.start()} }

調(diào)用：

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

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。