Qt 自定义窗体的简单实现(一)-蒲公英云

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);}");