基于 QT 实现一个 Ikun 专属桌面宠物

Step0、实现思路

想到的思路有两种：

1、使用 QT 的状态机模式，参考官网文档，这个模式的解耦最佳

2、使用原生 Wigets，将窗口设置为透明无框，循环播放桌面宠物的状态

本文采用第二种思路，实现一个极简版示例。

Step1、新建 Qt Wigets Application

Step2、设置透明背景与鼠标事件

修改 widget.h 头文件，

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
protected:
    void mousePressEvent(QMouseEvent *event); // 鼠标点击事件
    void mouseMoveEvent(QMouseEvent *event); // 鼠标移动事件
    void paintEvent(QPaintEvent *); // 绘画事件
protected:
    QPoint pos;
private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

修改 widget.cpp，

#include "widget.h"
#include "ui_widget.h"
#include <qpainter.h>
#include <QMouseEvent>
#include <QPaintEvent>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置窗口无边框并且透明背景
    this->setWindowFlag(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);
    this->setWindowFlags(windowFlags() | Qt::WindowStaysOnTopHint);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::mousePressEvent(QMouseEvent* ev)
{
    if(ev->button()==Qt::LeftButton)
    {
        pos=ev->pos();
    }
}

void Widget::mouseMoveEvent(QMouseEvent*ev)
{
   
    if(ev->buttons()==Qt::LeftButton)
    {
        int x,y;
        x=ev->pos().x()-pos.x();
        y=ev->pos().y()-pos.y();
        this->move(this->x()+x,this->y()+y);
    }
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    QPixmap pixmap;

    pixmap.load("../MyPet/image/pikakun.png");

    painter.drawPixmap(0, 0, 128, 128, pixmap);
}

调整窗口大小，

Step3、编译打包

编译运行，

打包部署，

# linux操作系统下的QT打包部署工具
官网 https://gitcode.net/mirrors/probonopd/linuxdeployqt

下载地址 https://github.com/probonopd/linuxdeployqt/releases/download/continuous/linuxdeployqt-continuous-x86_64.AppImage

# 赋权，重命名
chmod +x linuxdeployqt-continuous-x86_64.AppImage
sudo mv linuxdeployqt-continuous-x86_64.AppImage linuxdeployqt
sudo mv linuxdeployqt /usr/local/bin
linuxdeployqt --version

# 配置系统变量
# 例如，QT 安装地址为 /home/sam/MyWorkspace/qt-everywhere-src-6.0.0/qtbase/bin/qmake

# 修改文件 ~/.bashrc
vim ~/.bashrc
# add qt env
export PATH=/home/sam/MyWorkspace/qt-everywhere-src-6.0.0/qtbase/bin:$PATH
export LIB_PATH=/home/sam/MyWorkspace/qt-everywhere-src-6.0.0/qtbase/lib:$LIB_PATH
export PLUGIN_PATH=/home/sam/MyWorkspace/qt-everywhere-src-6.0.0/qtbase/plugins:$PLUGIN_PATH
export QML2_PATH=/home/sam/MyWorkspace/qt-everywhere-src-6.0.0/qtbase/qml:$QML2_PATH

# 刷新配置
source ~/.bashrc

# 查看 qmake 是否生效
qmake -v

# QT 打包发布 Release 版本的可执行文件 MyPet

# MyPet 直接运行是报错的，需要 linuxdeployqt 打包依赖
linuxdeployqt MyPet -appimage

# Windows 自带 windeployqt.exe

Windows 下注意一个坑，要打开 QT 命令行，并且在 windeployqt.exe 的根目录下执行打包，否则会出现依赖打包遗漏的情况，

注意，需要将对应的图片资源放到打包文件夹下，图片资源对应代码中的相对路径/绝对路径，否则在其他相同操作系统的电脑上会找不到图片。