新手如何用QT做一个“动漫宠物“？进来学！！！！

Posted 2021-05-10 老拆

好久不见，又是这样的深夜，也算是忙里偷闲，分享下我前一段时间写的QT小玩具吧

• • 交流群
  • 1.效果展示
  • 2.灵感
  • 3.思路
  • 4.代码部分
  • 源码

交流群

698742127 想学习的小伙伴可以加一下，可以一起讨论问题

---

1.效果展示

这里发了一遍，图片不能显示（动漫的可能不符合规定），后面有图片，或者自己去下源码就可以看见了！

2.灵感

程序员，少不了与黑夜为伴，就像是这样一个平静且平常的夜晚，一个人在屏幕前思索良久，眉头紧皱，缓缓写下两行代码

是的，还错了，哈哈
我就是在平常写代码的时候，想出来的这样一个灵感，我--------为什么不能写一个程序来陪我一起呢？于是我想起来了小时候的时光，那个时候还喜欢玩QQ农场，QQ宠物，当时感觉那个小企鹅就有生命一样陪着我玩游戏，于是我想用QT写一个简单的桌面宠物（只是单纯的看，因为时间跨度比较大（时隔好久才把之前的小项目写到博客，我都把它忘记了），越学习，就会发现以前自己写的东西有问题，有缺陷，所以在这里没有加功能，就只是把之前写的简单代码给大家看一下，分享下思路）

3.思路

相信用过QT的都知道，你只要会新建Progect，会运行就可以把一个界面运行出来
类似于这样

这是最简单的一个界面了，系统自动帮你写好了，你运行就可以了，这里我创建的是widget
那么！
问题来了，怎么样才能做出类似宠物的界面呢？——透明
对的，这就是我当时想到的 ，一但你想到了这个，那么你就能继续往下写了
这里我们就要设置窗口的属性了 ——setAttribute
这里就是官方文档的说明，刚开始学要学会按f1，因为我当时也是新手，
在这里我们设置 setAttribute(Qt::WA_TranslucentBackground, true); 你翻译过来就能理解了

setAttribute(Qt::WA_TranslucentBackground, true);

设置完此属性后，窗口就能透明了，那么我们接下来就应该是想怎么把“宠物弄动”也是很简单，——动画

当时我想的是用Qlable,但是后来去试了下发现不够，单纯的Qlable是不可以把动图放上去的，然后就到处找，终于让我找到了Qmove动画的效果，这样子 我们的问题就迎刃而解了！
我们先设置Qlable控件，我们就直接去ui界面吧
拖动一个Qlable组件到面板上，大小你可以随意定
这里不要管那几个放大缩小的图标按钮，因为这是我给你们看效果，在原有的代码上面重新改了一下，这些按钮功能我们后续就讲到了！

在这里就多说一嘴吧，怎么把图片资源导入进Qt,先单击我们的项目，然后ADD New；

之后创建完之后，发现出来一个这个 再add new （这里提前把图片资源放到自己的工程里面）然后就可以了！

接下来就去网上找了个动图，利用Qmove放到了Qlable，可是我发现是这样子

第二遍！！这里不要管那几个放大缩小的图标按钮，因为这是我给你们看效果，在原有的代码上面重新改了一下，这些按钮功能我们后续就讲到了！

相信可以看到，我们把动画显示出来了，但是呢，我们想要一个类似于宠物的东西，但是这明显是一张gif啊，所以问题出在哪里呢？我们的窗口确实是透明的啊，是的，但是我们的gif不是透明的，在这个问题上，我当时又废了好半天去ps 。。。。（幸好我会ps和pr） 其实操作很简单，你去网上搜一下怎么把gif背景变透明就可以了，就是一个简单的工具！，这里我给大家看一下我扣好的图片样式

你想象一下，咱们的窗口就是透明的，再把图片放上去，人物后面的背景也是透明的，是不是有那味儿了

4.代码部分

首先承接我们之前讲的

setAttribute(Qt::WA_TranslucentBackground, true);//设置属性
    QMovie *movie = new QMovie(":/im/big.gif"); 
    movie->setScaledSize(QSize(400,200));
    ui->label->setMovie(movie); //set move就是字面意思
    movie->start();//这里一定不要忘记，要让动画开始
    setWindowFlags(Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint);

movie->setScaledSize(QSize(400,200));

将缩放后的框架大小设置为size。

setWindowFlags(Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint);
setWindowFlags，我翻译过来就是设置windows标志（英语不太好），
里面的（Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint）相当于把qt窗体默认的功能全部取消，保证窗口一直在前面——这正是我们想要的，我们一定要保证窗体一直在前，因为我们随便去点击什么，它一直在前面，我们就可以一直看着它！这里不清楚直接去看文档效果好一点，我也是找出来的
至此我们就有一个差不多的效果了，唯一的缺点就是不能移动！因为哦我们上面把窗体的默认功能也取消了，所以我们在这里要重写鼠标事件

private:
    Ui::Widget *ui;
    bool mouse_Flag_Clicked;  //鼠标点击左键
    QPoint screenPos;// 屏幕上的点
    QSystemTrayIcon	*systemTrayIcon;//托盘，后面可以自己去实现，这里就不说了

void Widget::mouseMoveEvent(QMouseEvent *event){

    //移动窗口
    if(mouse_Flag_Clicked){
        QPoint tPos = event->globalPos() - screenPos;  //t是temp的缩写          
        move(pos() + tPos);
        screenPos = event->globalPos();
    }

}

这里是唯一的难点了，大家自己去想吧，我当时反正也想了半天，这还是要自己去锻炼的！

void Widget::mousePressEvent(QMouseEvent *event)
{
   if(event->buttons() == Qt::LeftButton){//（这里浅的理解就是你按压下的按钮是鼠标左键）
            
            mouse_Flag_Clicked = true;
            screenPos = event->globalPos();
        }

void Widget:: mouseReleaseEvent(QMouseEvent *event)
{
    mouse_Flag_Clicked = false;
}

接下来就是那几个按钮了，细的就不多说了，简单说一下

这样子就可以把按钮变自己想要的图片的样子了，我这里是去阿里巴巴矢量图标库下载的。
之后

void Widget::on_maxButton_clicked()
{
    this->showMaximized();

}

void Widget::on_closeButton_clicked()
{
    this->close();
}
void Widget::on_minButton_clicked()
{
    this->showMinimized();
    
     this->hide();//隐藏程序主窗口

至此，差不多就这样子了

源码

源码
提取码 jszb

希望大家多多支持，一起加油！