QML实现自己的桌面萌宠源码分享

一、效果展示

1、撒娇

2、拖动

3、右下角效果

二、源码分享

1、工程目录

2、主窗口源码

Main.qml

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property QtObject petWindow: null

    Component.onCompleted: {
        var w = Qt.createComponent("PetWindow.qml");
        if(w.status === Component.Ready)
        {
            petWindow = w.createObject(null, {visible: true});
        }
    }
}

3、宠物源码

PetWindow.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs

ApplicationWindow {
    id:root
    width: 100
    height: 150
    color: "transparent"
     flags: Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint

    property point movePressStartPoint: Qt.point(0,0)
    property bool movePressed: false
    property QtObject dialogWindow: null

    AnimatedImage{
        id:animatedImage
        anchors.fill: parent
        source: "qrc:/PetWindow/image/pet.gif"
        playing: false
        onCurrentFrameChanged: {
            if(currentFrame === frameCount -1)
                animatedImage.playing = false
        }
    }

    MouseArea{
        anchors.fill: parent
        cursorShape: Qt.OpenHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true
        onPressed:(mouse)=> {
                      if(mouse.button === Qt.LeftButton)
                      {
                          movePressStartPoint.x = mouseX
                          movePressStartPoint.y = mouseY
                          movePressed = true
                      }
                      else if(mouse.button === Qt.RightButton){
                          console.log("RightButton press")
                      }
                  }
        onReleased: (mouse)=> {
                        if(mouse.button === Qt.LeftButton)
                            movePressed = false;
                    }

        onEntered: {
            animatedImage.playing = true
            notify("右键点我，发现更多功能！",3000)
        }

        onMouseXChanged: {
            if(!movePressed)
                return
            var x = root.x + mouseX - movePressStartPoint.x
            if(x<0)
                root.x = 0
            else if(x + root.width > Screen.width)
                root.x = Screen.width - root.width
            else
                root.x = x
            dialogWindow.x = root.x + (root.width - dialogWindow.width)/2
        }
        onMouseYChanged: {
            if(!movePressed)
                return
            var y = root.y + mouseY - movePressStartPoint.y
            if(y<0)
                root.y = 0
            else if(y + root.height > Screen.height)
                root.y = Screen.height - root.height
            else
                root.y = y
            dialogWindow.y = root.y - dialogWindow.height
        }
    }
    Timer{
        id:timerNotiftClose
        repeat: false
        running: false
        onTriggered: {
            dialogWindow.close()
        }
    }

    Component.onCompleted: {
        var w = Qt.createComponent("PetDialogWindow.qml");
        if(w.status === Component.Ready)
        {
            dialogWindow = w.createObject(null, {visible: false});
            dialogWindow.x = root.x + (root.width - dialogWindow.width)/2
            dialogWindow.y = root.y - dialogWindow.height
        }
    }
    function notify(message,timeout){
        dialogWindow.message = message
        dialogWindow.show()
        timerNotiftClose.interval = timeout
        timerNotiftClose.start()
    }
}

4、宠物对话框源码

PetDialogWindow.qml

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id:root
    width: 200
    height: 150
    color: "transparent"
    flags: Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint

    property alias message: textMessage.text

    background: Rectangle{
        anchors.fill: parent
        color:"transparent"
        Image {
            anchors.fill: parent
            source: "qrc:/PetWindow/image/background.svg"
        }
    }
    Text{
        id:textMessage
        anchors.centerIn: parent
        width: root.width/1.4
        height: root.width/2.2
        color:"black"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.bold: true
        text:"右键点我，发现更多功能！"
        wrapMode: Text.WordWrap
    }
}

三、完整和相关资源工程下载

点我下载