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

最新推荐文章于 2024-01-04 00:15:00 发布

Genven_Liang

最新推荐文章于 2024-01-04 00:15:00 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT 文章标签： Qt 自定义窗体的简单实现上贴边悬停背景变化 1024程序员节

学习笔记

本文链接：https://blog.youkuaiyun.com/nanfeibuyi/article/details/88920860

QT 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个模仿飞秋界面的Qt自定义窗体案例，实现了无边框窗口及鼠标拖拽功能，并通过重写鼠标事件来控制窗体移动，同时展示了如何改变控件样式以响应鼠标悬停和聚焦状态。

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

一、简述

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

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

二、效果

三、工程结构

四、源文件

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());//贴边，其实就是只露出一点点，设置起始位置另窗体大部分不在可视区域
    }
}

界面布局：

五、总结

1、实现无边框

this->setWindowFlags(Qt::FramelessWindowHint);

2、无边框拖动

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

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

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

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

3、上贴边

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

5、待完善