Qt 自定义窗体的简单实现(一)

ゞ浴缸里的玫瑰 2022-02-24 23:53 223阅读 0赞

### **Qt 自定义窗体的简单实现(一)** ###

**一、简述**

记--简单的模仿飞秋界面。

例子打包：链接: https://pan.baidu.com/s/1IfnCd5HbyUSxK7rmRjBKRQ 提取码: cnds

二、效果

![20190330232730520.gif][]

三、工程结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70][]

四、源文件

MyFeiQ.pro文件

#-------------------------------------------------
    #
    # Project created by QtCreator 2019-01-07T14:14:15
    #
    #-------------------------------------------------
    
    QT       += core gui
    
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    
    TARGET = MyFeiQ
    TEMPLATE = app
    
    
    SOURCES += main.cpp\
            myfeiq.cpp
    
    HEADERS  += myfeiq.h
    
    FORMS    += myfeiq.ui
    
    RESOURCES += \
        res.qrc

main.cpp文件

#include "myfeiq.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        MyFeiQ w;
        w.show();
    
        return a.exec();
    }

myfeiq.h文件

#ifndef MYFEIQ_H
    #define MYFEIQ_H
    
    #include <QWidget>
    #include <QPoint>//坐标点
    #include <QMouseEvent>//鼠标事件
    
    namespace Ui {
    class MyFeiQ;
    }
    
    class MyFeiQ : public QWidget
    {
        Q_OBJECT
    
    public:
        explicit MyFeiQ(QWidget *parent = 0);
        ~MyFeiQ();
    protected:
        void mousePressEvent(QMouseEvent *e);//重写鼠标按下事件
        void mouseReleaseEvent(QMouseEvent *);//重写鼠标释放事件
        void mouseMoveEvent(QMouseEvent *e);//重写鼠标移动事件
        void enterEvent(QEvent *);  //重写鼠标进入事件
        void leaveEvent(QEvent *);  //重写鼠标离开事件
    private slots:
        void on_btnClose_clicked();
    
        void on_btnMin_clicked();
    
    private:
        Ui::MyFeiQ *ui;
        QPoint m_beginPos;//用来记录鼠标的按下的开始位置
        bool m_press;//用来记录鼠标是否处于按下状态AA
    };
    
    #endif // MYFEIQ_H

myfeiq.cpp文件

#include "myfeiq.h"
    #include "ui_myfeiq.h"
    
    MyFeiQ::MyFeiQ(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::MyFeiQ)
    {
        ui->setupUi(this);
        //设置窗体无边框.//setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
        this->setWindowFlags(Qt::FramelessWindowHint);
    
        m_press = false;
    
        //鼠标悬停在按钮上面的时候背景色变化
        ui->btnClose->setStyleSheet("QPushButton{border-image:url(:/res/imgs/close.png);} QPushButton:hover{border-image:url(:/res/imgs/closeHover.png);}");
        ui->btnMin->setStyleSheet("QPushButton{border-image:url(:/res/imgs/min.png);} QPushButton:hover{border-image:url(:/res/imgs/minHover.png);}");
        ui->btnHeadPortrait->setStyleSheet("QPushButton{border-image:url(:/res/imgs/headPortrait.png);} QPushButton:hover{border-image:url(:/res/imgs/headPortraitHover.png);}");
        //取得焦点和失去焦点的时候背景颜色变化
        ui->lineEditSignature->setStyleSheet("QLineEdit:blur{border-image:url(:/res/imgs/bg.png);} QLineEdit:focus{border-image:url(:/res/imgs/bg3.png);}");
    }
    
    MyFeiQ::~MyFeiQ()
    {
        delete ui;
    }
    
    void MyFeiQ::mousePressEvent(QMouseEvent *e)//鼠标按下事件
    {
       if(e->button() == Qt::LeftButton )//鼠标左键按下
        {
            m_press = true;
            m_beginPos = e->pos();//鼠标相对窗体的位置
        }
    
    }
    
    void MyFeiQ::mouseReleaseEvent(QMouseEvent *)//鼠标释放事件
    {
        m_press = false;
    }
    
    void MyFeiQ::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
    {
        if (m_press)//鼠标是按下状态的
        {
             //当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             //鼠标移动的大小+窗体原来的位置=窗体移动后的位置
             this->move(e->pos() - m_beginPos + this->pos());
        }
    }
    
    void MyFeiQ::on_btnClose_clicked()//关闭
    {
        this->close();
    }
    
    void MyFeiQ::on_btnMin_clicked()//最小化
    {
        this->showMinimized();
    }
    
    void MyFeiQ::enterEvent(QEvent *)  //--鼠标进入窗体范围事件
    {
        if(this->pos().y()<=0)//鼠标进入并且已经上贴边
        {
            move(pos().x(),0);//弹出整个窗体--x不变，y起始设为上边框
        }
    
    }
    
    void MyFeiQ::leaveEvent(QEvent *)  //鼠标离开窗体范围事件
    {
        if(this->pos().y()<=0)//窗体贴在屏幕上边
        {
            move(pos().x(), 1-this->height());//贴边，其实就是只露出一点点，设置起始位置另窗体大部分不在可视区域
        }
    }

界面布局：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1][]

五、总结

1、实现无边框

this->setWindowFlags(Qt::FramelessWindowHint);

2、无边框拖动

重写鼠标按下、释放、移动事件，监听鼠标动作，使得窗体跟随鼠标移动。

当鼠标按下---记下，作为起始位置

鼠标按下时--鼠标移动量就是窗体的移动量

if (m_press)//鼠标是按下状态的
        {
             //当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             //鼠标移动的大小+窗体原来的位置=窗体移动后的位置
             this->move(e->pos() - m_beginPos + this->pos());
        }

3、上贴边

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 2][]

move(pos().x(), 1-this->height());//贴边，其实就是只露出一点点，设置起始位置另窗体大部分不在可视区域

4、鼠标悬停样式变化

//鼠标悬停在按钮上面的时候背景色变化
        ui->btnClose->setStyleSheet("QPushButton{border-image:url(:/res/imgs/close.png);} QPushButton:hover{border-image:url(:/res/imgs/closeHover.png);}");
        ui->btnMin->setStyleSheet("QPushButton{border-image:url(:/res/imgs/min.png);} QPushButton:hover{border-image:url(:/res/imgs/minHover.png);}");
        ui->btnHeadPortrait->setStyleSheet("QPushButton{border-image:url(:/res/imgs/headPortrait.png);} QPushButton:hover{border-image:url(:/res/imgs/headPortraitHover.png);}");
        //取得焦点和失去焦点的时候背景颜色变化
        ui->lineEditSignature->setStyleSheet("QLineEdit:blur{border-image:url(:/res/imgs/bg.png);} QLineEdit:focus{border-image:url(:/res/imgs/bg3.png);}");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 3][]

5、待完善

[20190330232730520.gif]: /images/20220225/d7a1a5bfc9d14f6bb313c0fb2bddc4e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70]: /images/20220225/f15d61d682d94a7698fb3e93d51ed3d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1]: /images/20220225/d23d3e982e57470f82a654103c412f19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 2]: /images/20220225/bdd2ef114abc463c8863155b33dc8168.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 3]: /images/20220225/7ceeca5436014febac4a9de8fc6b5137.png