[游戏开发]【Qt6/PySide6】【QML】【教程】创建带图片的通知弹窗

【Qt6】【QML】【教程】创建通知弹窗

整体的代码不是很难，必要的注释都写在代码里了。需要注意的是

1. PopWindow.qml 的Window属性的x y 可以被外部调用的时候被覆盖.

2. 窗口的大小根据Loader里面content_pop_window的内容大小改变

//PopWindow.qml
import QtQuick
import QtQuick.Controls 2.5
import QtQuick.Window 2.3

Window{
    id: pop_window
    visible: false
    color: "transparent"
    // 透明度
    opacity: 0
    // 取消边框
    flags:Qt.FramelessWindowsHint | Qt.ToolTip
    // 设置为非模态
    modality: Qt.NonModal
    //设置初始位置(外部设置会覆盖此设置)
    x: Screen.width - content_pop_window.width
    y: 100
    //根据Loader设置大小
    width: content_loader.width
    height: content_loader.height
    //设置显示内容的变量
    property alias content_pop_window:content_loader.sourceComponent

    MouseArea{
        id:content_mouse
        anchors.fill: parent
        hoverEnabled: true
    }

    //加载内容的Loader
    Loader{
        id:content_loader
        anchors.centerIn:parent
    }

    // 设置出现后显示时间的计时器
    Timer{
        id:show_timer
        interval: 2000
        repeat: true
        onTriggered:{
            // 此函数在后面定义
            hideWindow();
        }
    }

    //设置出现显示动画
    ParallelAnimation{
        id: show_anim
        // 透明度动画
        NumberAnimation{
            target:pop_window
            property: "opacity"
            from:pop_window.opacity
            to: 1
            duration:800
        }
        //位置移动动画
        NumberAnimation{
            target:pop_window
            property: "x"
            //从当前值开始移动
            from: Screen.width
            to: pop_window.x - content_loader.width
            duration:800
        }
        onStarted:{
            pop_window.show()
        }
        //动画结束信号
        onFinished:{
            show_timer.start()
        }
    }
    //设置关闭显示动画
    ParallelAnimation{
        id: hide_anim
        // 透明度动画
        NumberAnimation{
            target:pop_window
            property: "opacity"
            from:pop_window.opacity
            to: 0
            duration:800
        }
        //位置移动动画
        NumberAnimation{
            target:pop_window
            property: "x"
            //从当前值开始移动
            from: pop_window.x
            to: Screen.width
            duration:800
        }
        //动画结束之后关闭窗口
        onFinished:{
            show_timer.stop();
            pop_window.close();
        }
    }

    //显示弹窗
    function showWindow(){
        show_anim.start()
    }

    //隐藏弹窗
    function hideWindow(){
        show_anim.stop()
        hide_anim.start()
    }
}

调用:

这里的调用写的其实有点多了，直接在content_pop_window 里面创建控件然后相应信号执行pop.showWindow就能看到弹窗的效果了

//main.qml
import QtQuick
import QtQuick.Controls 2.5
import QtQuick.Window 2.3
import Qt5Compat.GraphicalEffects

Window{
    visible: true
    Button{
        text:"Pop"
        width:100
        height:50
        anchors.centerIn:parent
        onClicked:pop.showWindow()
    }
    PopWindow{
        id:pop
        // 设置初始位置,对PopWindow里面的x,y进行了覆盖
        x: get_screen_pixel(1, Screen.width) - get_screen_pixel(0.005, Screen.width)
        y: get_screen_pixel(0.13, Screen.height)
        content_pop_window:
            Rectangle{
                id:bk_rectangle
                width:200
                height:70
                radius:10
                color: Qt.rgba(0.8,0.8,0.8,0.8)

                Image {
                    id: img
                    width: 60
                    height: 60
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin:6
                    source: "/txwh_icon.jpg"
                    smooth: true
                    visible: false
                }

                Rectangle {
                    id: img_mask
                    width: img.width
                    height: img.height
                    radius: 10
                    color: "red"
                    visible: false
                }

                OpacityMask {
                    anchors.fill: img
                    source: img
                    maskSource: img_mask
                }

                Text{
                    id:music_name
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: -16
                    anchors.left:img.right
                    anchors.leftMargin:10
                    font.pointSize:13
                    text:qsTr("Music Name")
                }

                Text{
                    id:player_name
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: 16
                    anchors.left:img.right
                    anchors.leftMargin:10
                    font.pointSize:11
                    text:qsTr("Player")
                }

                MouseArea{
                    anchors.fill:parent
                }
            }
    }

    // 为了适应不同的屏幕，需要使用百分比表示
    function get_screen_pixel(percent, sum_pixel){
        return percent * sum_pixel
    }
}

参考：QML实现桌面右下角弹窗