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